Skip to content

A
ai-box
Commit c756def8 authored by fisherdaddy's avatar fisherdaddy
Browse files
Options

chore: 优化手写字体生成器和名言卡片生成器的样式

parent 581157d2
Show whitespace changes
Inline Side-by-side
Showing with 447 additions and 296 deletions
src/components/HandwriteGen.jsx
View file @ c756def8
......@@ -145,12 +145,11 @@ function HandwritingGenerator() {
const backgroundOffset = -(lineSpacing * fontSize - fontSize);
return (
<Layout style={{ minHeight: '100vh' }}>
<div className="handwrite-container">
<Layout>
<Sider width={300} className="site-layout-background">
<Menu mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">手写字体生成器</Menu.Item>
</Menu>
<div className="settings-section">
<h2 className="title-label">手写字体生成器</h2>
<div className="form-group">
<label>手写字体</label>
<Select value={font} onChange={setFont} style={{ width: '100%' }}>
......@@ -272,19 +271,20 @@ function HandwritingGenerator() {
</div>
</Sider>
<Layout>
<Content style={{ margin: '16px' }}>
<Row gutter={16}>
<Content style={{ padding: '1rem' }}>
<Row gutter={24}>
<Col xs={24} lg={12}>
<Title level={4}>输入文本</Title>
<div className="section-title">输入文本</div>
<TextArea
rows={15}
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="请输入您的文本..."
style={{ borderRadius: '16px', padding: '1rem' }}
/>
</Col>
<Col xs={24} lg={12}>
<Title level={4}>预览</Title>
<div className="section-title">预览</div>
<div
className="preview-area"
style={{
......@@ -292,31 +292,29 @@ function HandwritingGenerator() {
fontSize: `${fontSize}px`,
color: fontColor,
textAlign: textAlign,
marginTop: `${topMargin}px`,
marginLeft: `${leftMargin}px`,
marginRight: `${rightMargin}px`,
paddingTop: `${topMargin}px`,
paddingLeft: `${leftMargin}px`,
paddingRight: `${rightMargin}px`,
lineHeight: `${lineSpacing * fontSize}px`,
letterSpacing: `${charSpacing}px`,
border: borderEnabled ? '1px solid #000' : 'none',
backgroundImage: getPaperBackground(),
backgroundSize: getBackgroundSize(),
backgroundRepeat: getBackgroundRepeat(),
padding: '20px',
minHeight: '400px',
boxSizing: 'border-box',
backgroundPosition: `left ${backgroundOffset}px`,
minHeight: '400px',
}}
>
{text.split('\n').map((line, index) => (
<p key={index} style={{ margin: 0 }}>{line}</p>
))}
</div>
</Col>
</Row>
</Content>
</Layout>
</Layout>
</div>
);
}
......
src/components/QuoteCard.jsx
View file @ c756def8
......@@ -28,42 +28,88 @@ const backgroundOptions = [
];
const Container = styled.div`
display: flex;
flex-direction: row;
gap: 20px;
padding: 20px;
justify-content: center;
background-color: #f5f5f5;
min-height: 100vh;
`;
background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
padding: 2rem;
position: relative;
const TitleLabel = styled.label`
font-size: 16px; // 增大字体大小
color: #1677FF; // 设置字体颜色为深色
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
`;
const ContentWrapper = styled.div`
display: flex;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
@media (max-width: 768px) {
flex-direction: column;
}
`;
const InputContainer = styled.div`
flex: 1;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
gap: 15px;
gap: 1rem;
`;
const TitleLabel = styled.h2`
font-size: 1.8rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.02em;
`;
const PreviewContainer = styled.div`
flex: 1;
background-color: ${(props) => props.$bgColor || '#333333'}; // 使用短暂属性
padding: 20px;
border-radius: 12px;
border: 1px solid #333;
color: ${(props) => props.$fontColor || '#b8b83b'}; // 使用短暂属性
background: ${(props) => props.$bgColor || '#333333'};
padding: 2rem;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
min-height: 200px;
height: fit-content;
align-self: flex-start;
transition: all 0.3s ease;
margin-top: 1rem;
&:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
}
@media (max-width: 768px) {
margin-top: 2rem;
width: 100%;
height: 100%;
}
`;
const QuoteText = styled.div`
......@@ -98,19 +144,31 @@ const InputText = styled.textarea`
const InputField = styled.input`
width: 100%;
padding: 10px;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid #dadce0;
font-size: 16px;
border: 1px solid rgba(99, 102, 241, 0.2);
font-size: 1rem;
transition: all 0.3s ease;
&:hover, &:focus {
border-color: rgba(99, 102, 241, 0.4);
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
`;
const Select = styled.select`
width: 100%;
padding: 10px;
padding: 0.8rem;
border-radius: 8px;
border: 1px solid #dadce0;
font-size: 16px;
background-color: #fff;
border: 1px solid rgba(99, 102, 241, 0.2);
font-size: 1rem;
transition: all 0.3s ease;
background: white;
cursor: pointer;
&:hover {
border-color: rgba(99, 102, 241, 0.4);
}
`;
const ColorInput = styled.input`
......@@ -121,22 +179,26 @@ const ColorInput = styled.input`
`;
const Label = styled.label`
font-size: 14px;
margin-bottom: 5px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.5rem;
display: block;
`;
const DownloadButton = styled.button`
padding: 10px 20px;
background-color: #1677ff;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
border: none;
padding: 1rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
transition: all 0.3s ease;
margin-top: 1rem;
&:hover {
background-color: #2f86ff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
`;
......@@ -179,6 +241,7 @@ function QuoteCard() {
return (
<Container>
<ContentWrapper>
{/* 左侧输入区域 */}
<InputContainer>
<TitleLabel>名言卡片生成器</TitleLabel>
......@@ -283,6 +346,7 @@ function QuoteCard() {
—— {author || '作者姓名'}
</QuoteAuthor>
</PreviewContainer>
</ContentWrapper>
</Container>
);
}
......
src/styles/HandwriteGen.css
View file @ c756def8
......@@ -58,3 +58,92 @@ body, html, #root {
.ant-btn {
margin-top: 16px;
}
.handwrite-container {
min-height: 100vh;
background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
}
.settings-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
margin: 1rem;
}
.preview-area {
background: rgba(255, 255, 255, 0.9);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
overflow: auto;
padding: 2rem;
}
.preview-area:hover {
box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.3);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
font-weight: 600;
color: #1a1a1a;
margin-bottom: 0.5rem;
display: block;
}
.ant-select-selector,
.ant-input,
.ant-input-number,
.ant-slider {
border-radius: 8px !important;
border: 1px solid rgba(99, 102, 241, 0.2) !important;
}
.ant-select-selector:hover,
.ant-input:hover,
.ant-input-number:hover {
border-color: rgba(99, 102, 241, 0.4) !important;
}
.ant-btn-primary {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
border: none !important;
border-radius: 8px !important;
height: 40px !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
}
.ant-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.section-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1rem;
background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.01em;
}
.title-label {
font-size: 1.8rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.02em;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment