0:00
0:00
0:00
0:00
FPGA的核心特点
FPGA的独特优势与技术特性
Free membership
Transform the way you work with one place for everyone.
Easy Steaming make money & connected with people
Transform the way you work with one place for everyone and everything you need to get stuff done.
Discuss what’s important
Create for anything worth discussing, from team projects to company
Seemless file sharing
Eliminate discord caused by messy chats and emails. get a better grip on work.
Invite or refer people to get more views & earning
Transform the way you work with one place for everyone and everything you need to get stuff done.
One Platform For Many Apps
With 10.0+ integrations, you can bring together everything your team needs to communicate, you can bring together everything your team needs collaborate, and coordinate work, start to finish,
Hear something from our trusted clients
I am officially in love with the service. I've already made 2 video widgets and it took me less than 15 minutes. This is a gamechanger. I love that it can be personalized and easy to use
Start 7 days Trial
It’s free to start no credit card required
About us
You can work on your own time. No account needed --, KB Square 3rd floor, Lalmatia, Dhaka, Bangladesh.
Product
Download
Pricing
Charginge
Integrations
Browser Extension
Links
Schedule meeting
Quality assurance
Data Marketing
Pricing
Product Development
Contact
Hello
+00861450857
Support@hello.net
copyright 2024 @ All Right Reserved.
/* 更新全局颜色变量 */
:root {
--primary-color: #ff4757; /* 主色调 - 红色 */
--secondary-color: #ff6b81; /* 辅助色 - 浅红色 */
--accent-color: #ff4757; /* 强调色 - 红色 */
--bg-color: #f5f7fa; /* 背景色 */
--text-color: #333333; /* 主要文字颜色 */
--text-light: #666666; /* 次要文字颜色 */
--border-color: #e0e3e7; /* 边框颜色 */
--card-bg: #ffffff; /* 卡片背景 */
}
body {
background: var(--bg-color);
color: var(--text-color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
/* 容器样式 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: none; /* 移除容器背景色 */
}
/* 首屏样式 */
.hero-section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding: 40px 0;
}
.hero-content {
width: 100%;
position: relative;
z-index: 2;
}
/* 标题组样式 */
.title-group {
text-align: center;
padding-top: 40px;
}
.main-title {
font-size: 56px;
font-weight: 800;
background: linear-gradient(135deg, #0066cc, #4da6ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
letter-spacing: 2px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.subtitle {
font-size: 24px;
color: #4da6ff;
margin-bottom: 30px;
}
.org-badges {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}
.org-badge {
background: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 30px;
font-size: 14px;
color: #a3c6ff;
}
/* 关键词标签云 */
.keyword-cloud {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
margin: 60px 0;
}
.keyword {
position: absolute;
padding: 8px 16px;
background: none;
backdrop-filter: none;
border-radius: 20px;
font-size: 14px;
color: var(--primary-color);
animation: float 6s ease-in-out infinite;
white-space: nowrap;
text-shadow: 0 0 10px rgba(77, 166, 255, 0.1);
box-shadow: 0 2px 10px rgba(77, 166, 255, 0.1);
}
/* 飘动动画 */
@keyframes float {
0% {
transform: translate(0, 0) rotate(0deg);
}
20% {
transform: translate(-10px, -15px) rotate(-2deg);
}
40% {
transform: translate(10px, -25px) rotate(2deg);
}
60% {
transform: translate(-5px, -15px) rotate(-1deg);
}
80% {
transform: translate(5px, -5px) rotate(1deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
/* 新增响应式样式 */
@media (max-width: 768px) {
.main-title {
font-size: 36px;
}
.keyword {
font-size: 12px;
padding: 6px 12px;
}
}
/* 新增特点卡片样式 */
.feature-cards-container {
overflow: hidden;
position: relative;
margin: 60px 0;
}
.feature-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.feature-card {
flex: 0 0 300px;
scroll-snap-align: start;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 30px;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 10px 20px rgba(77, 166, 255, 0.2);
}
.feature-icon {
font-size: 36px;
color: #4da6ff;
margin-bottom: 20px;
}
.feature-title {
font-size: 24px;
color: #fff;
margin-bottom: 15px;
}
.feature-desc {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
line-height: 1.6;
}
/* 新增样式 */
.section-title p {
color: rgba(255, 255, 255, 0.6);
font-size: 16px;
}
/* 应用场景卡片样式 */
.application-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.application-card {
background: var(--card-bg);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.application-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-icon {
font-size: 36px;
color: var(--primary-color);
margin-bottom: 20px;
}
.card-title {
font-size: 20px;
font-weight: 600;
color: #ff4757;
margin-bottom: 10px;
}
.card-text {
font-size: 14px;
color: var(--text-light);
line-height: 1.6;
}
/* 薪资卡片样式 */
.salary-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.salary-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.salary-card {
background: var(--card-bg);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.salary-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-icon {
font-size: 36px;
color: var(--primary-color);
margin-bottom: 20px;
}
.card-title {
font-size: 20px;
font-weight: 600;
color: #ff4757;
margin-bottom: 10px;
}
.card-salary {
font-size: 24px;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 10px;
}
.card-subtitle {
font-size: 14px;
color: var(--text-light);
margin-bottom: 20px;
}
.skill-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.skill-tag {
background: rgba(0, 102, 204, 0.1);
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
color: var(--primary-color);
transition: all 0.3s ease;
border: 1px solid rgba(0, 102, 204, 0.2);
}
.skill-tag:hover {
background: rgba(0, 102, 204, 0.2);
transform: translateY(-3px);
}
/* 响应式设计 */
@media (max-width: 768px) {
.salary-row {
grid-template-columns: 1fr;
}
.salary-card {
padding: 20px;
}
.card-icon {
font-size: 28px;
margin-bottom: 15px;
}
.card-title {
font-size: 18px;
}
.card-salary {
font-size: 20px;
}
.card-subtitle {
font-size: 13px;
}
.skill-tag {
font-size: 12px;
padding: 4px 10px;
}
}
/* 删除认证机构相关样式 */
.org-info,
.org-logo {
display: none;
}
/* 调整FPGA可视化区域样式 */
.fpga-visual-section {
height: 400px; /* 改为固定400px高度 */
position: relative;
overflow: hidden;
background: none;
margin: 60px 0;
border-radius: 20px; /* 调小圆角 */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); /* 添加阴影 */
perspective: 1000px;
}
/* 调整芯片模型尺寸 */
.chip-body {
width: 200px; /* 减小芯片尺寸 */
height: 200px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border-radius: 15px;
position: relative;
transform-style: preserve-3d;
box-shadow: 0 0 30px var(--glow-color);
}
/* 调整网格尺寸 */
.chip-grid {
position: absolute;
inset: 15px; /* 减小内边距 */
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
gap: 3px; /* 减小间距 */
}
/* 调整浮动动画幅度 */
@keyframes chipFloat {
0%, 100% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg) translateY(0); }
50% { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg) translateY(-10px); } /* 减小浮动高度 */
}
/* 调整背景网格尺寸 */
.circuit-background::before {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(0deg, transparent, transparent 15px, rgba(77, 166, 255, 0.05) 15px, rgba(77, 166, 255, 0.05) 16px),
repeating-linear-gradient(90deg, transparent, transparent 15px, rgba(77, 166, 255, 0.05) 15px, rgba(77, 166, 255, 0.05) 16px);
animation: circuitFlow 15s linear infinite;
}
/* 调整浮动粒子大小和密度 */
.floating-particles::before {
background-size: 40px 40px; /* 减小粒子间距 */
background-image: radial-gradient(circle at center, #4da6ff 0.5px, transparent 0.5px); /* 减小粒子大小 */
}
/* 调整芯片引脚尺寸 */
.chip-pins {
background: #666;
display: flex;
}
.chip-pins.left, .chip-pins.right {
width: 8px; /* 减小引脚宽度 */
height: 80%;
top: 10%;
}
.chip-pins.top, .chip-pins.bottom {
height: 8px; /* 减小引脚高度 */
width: 80%;
left: 10%;
}
/* 数据流动画 */
.data-flow {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(77, 166, 255, 0.2), transparent);
animation: dataFlow 2s linear infinite;
}
/* 动画定义 */
@keyframes circuitFlow {
0% { transform: translateY(0); }
100% { transform: translateY(21px); }
}
@keyframes dataFlow {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* FPGA芯片模型基础样式 */
.fpga-model {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(60deg) rotateZ(45deg);
transform-style: preserve-3d;
animation: chipFloat 10s ease-in-out infinite;
}
/* 电路背景样式 */
.circuit-background {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 50% 50%, rgba(77, 166, 255, 0.1) 0%, transparent 60%),
linear-gradient(90deg, transparent 0%, rgba(77, 166, 255, 0.05) 50%, transparent 100%);
opacity: 0.5;
}
/* 浮动粒子样式 */
.floating-particles {
position: absolute;
inset: 0;
perspective: 1000px;
}
/* 网格单元样式 */
.grid-cell {
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
transition: all 0.3s ease;
}
.grid-cell.active {
background: rgba(77, 166, 255, 0.5);
box-shadow: 0 0 10px rgba(77, 166, 255, 0.5);
}
/* 芯片引脚位置 */
.chip-pins {
position: absolute;
}
.chip-pins.left { left: -8px; }
.chip-pins.right { right: -8px; }
.chip-pins.top { top: -8px; }
.chip-pins.bottom { bottom: -8px; }
/* 添加3D效果 */
.fpga-visual-section {
perspective: 1000px;
}
.chip-body {
transform-style: preserve-3d;
position: relative;
}
/* 优化动画效果 */
@keyframes particleFloat {
0% { transform: translateZ(0); }
100% { transform: translateZ(50px); }
}
/* FPGA架构样式 */
.fpga-architecture {
width: 100%;
height: 100%;
position: relative;
}
/* CLB阵列样式 */
.clb-array {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: 4px;
background: rgba(77, 166, 255, 0.1);
padding: 10px;
border-radius: 8px;
}
.clb-unit {
background: rgba(77, 166, 255, 0.2);
border-radius: 4px;
position: relative;
transition: all 0.3s ease;
}
.clb-unit.active {
background: rgba(99, 102, 241, 0.3);
box-shadow: 0 0 15px var(--glow-color);
}
/* 互连资源样式 */
.routing-resources {
position: absolute;
inset: 15%;
border: 1px solid rgba(77, 166, 255, 0.2);
border-radius: 10px;
pointer-events: none;
}
.horizontal-routes, .vertical-routes {
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, transparent 49%, rgba(77, 166, 255, 0.2) 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, rgba(77, 166, 255, 0.2) 50%, transparent 51%);
background-size: 16.66% 16.66%;
}
/* 数据流动画 */
.data-flow-animation {
position: absolute;
inset: 0;
background: linear-gradient(45deg, transparent, rgba(77, 166, 255, 0.2), transparent);
animation: dataFlow 2s linear infinite;
pointer-events: none;
}
/* I/O块样式 */
.io-blocks {
position: absolute;
inset: 10%;
}
.io-block {
position: absolute;
background: rgba(255, 102, 52, 0.3);
border-radius: 4px;
}
.io-block.top, .io-block.bottom {
height: 10px;
width: 80%;
left: 10%;
}
.io-block.left, .io-block.right {
width: 10px;
height: 80%;
top: 10%;
}
/* 修改目标人群模块样式 */
.target-audience {
margin: 60px 0;
}
.audience-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
.audience-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.audience-card {
background: var(--card-bg);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.audience-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-icon {
font-size: 36px;
margin-bottom: 20px;
}
.card-title {
font-size: 20px;
font-weight: 600;
color: #ff4757;
margin-bottom: 15px;
}
.card-text {
font-size: 14px;
color: var(--text-light);
text-align: left;
}
.card-text ul {
padding-left: 20px;
margin: 0;
}
.card-text li {
margin-bottom: 8px;
line-height: 1.6;
}
/* 响应式设计 */
@media (max-width: 768px) {
.audience-row {
grid-template-columns: 1fr;
}
.audience-card {
padding: 20px;
}
.card-icon {
font-size: 28px;
margin-bottom: 15px;
}
.card-title {
font-size: 18px;
}
.card-text {
font-size: 13px;
}
}
/* 修改FAQ模块样式 */
.faq-container {
width: 80%;
margin: 0 auto;
background: var(--card-bg);
border-radius: 12px;
padding: 20px;
border: 1px solid var(--border-color);
}
.faq-item {
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
text-align: left; /* 确保左对齐 */
color: #ff4757;
}
.faq-question:hover {
background: rgba(0, 102, 204, 0.1);
}
.faq-answer {
padding: 15px;
color: var(--text-color);
line-height: 1.6;
}
details[open] .faq-question {
color: #00FFD1;
}
details[open] .faq-question i {
transform: rotate(180deg);
}
.faq-question i {
transition: transform 0.3s ease;
}
/* 统一模块容器样式 */
.module-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 统一模块标题样式 */
.module-title {
margin-bottom: 40px;
text-align: center;
}
.section-title {
font-size: 28px;
font-weight: 600;
color: #ff4757;
margin-bottom: 10px;
}
.module-subtitle {
font-size: 16px;
color: #666666;
}
/* 统一卡片样式 */
.card {
background: #ffffff;
border-radius: 12px;
padding: 20px;
border: 1px solid #e0e3e7;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.module-icon {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
.module-text {
color: var(--text-color);
line-height: 1.6;
}
/* 响应式调整 */
@media (max-width: 768px) {
.module-title {
margin-bottom: 30px;
}
.section-title {
font-size: 24px;
}
.module-subtitle {
font-size: 14px;
}
}
/* 关键词标签悬停效果 */
.keyword:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(77, 166, 255, 0.3);
}
/* 技能标签悬停效果 */
.skill-tag:hover {
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(77, 166, 255, 0.2);
}
/* 添加页脚样式 */
.footer {
background: var(--accent-color);
padding: 20px 0;
text-align: center;
margin-top: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer p {
color: #ffffff;
font-size: 14px;
}
.footer-spacer {
height: 40px;
}
/* 网格布局 */
.grid {
display: grid;
gap: 20px;
padding: 20px;
}
.grid-cols-3 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* 添加新的样式类 */
.text {
font-size: 16px;
color: var(--text-color);
line-height: 1.6;
margin-bottom: 1rem;
}
/* 新增FAQ模块样式 */
.faq-list {
width: 80%;
margin: 0 auto;
}
.faq-item {
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.faq-question:hover {
background: rgba(0, 102, 204, 0.1);
}
.faq-question-text {
flex: 1;
font-weight: 500;
}
.faq-toggle-icon {
margin-left: 10px;
transition: transform 0.3s ease;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-answer-content {
padding: 15px;
color: var(--text-color);
line-height: 1.6;
}
.faq-item.active .faq-answer {
max-height: 200px;
}
.faq-item.active .faq-toggle-icon {
transform: rotate(180deg);
}
/* 修改Banner布局 */
.hero-banner {
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
background: #373737;
color: #ffffff;
overflow: hidden;
}
.banner-content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
width: 100%;
padding: 0 20px;
}
.banner-text {
max-width: 50%;
z-index: 2;
}
.banner-title {
font-size: 48px;
font-weight: 800;
background: #ff4757;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
letter-spacing: 2px;
text-shadow: 0 0 20px rgba(255, 71, 87, 0.3);
}
.banner-subtitle {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
}
/* 芯片动画容器 */
.chip-animation {
position: relative;
width: 300px;
height: 300px;
perspective: 1000px;
}
/* 芯片模型 */
.chip-model {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotateChip 10s infinite linear;
}
@keyframes rotateChip {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
/* 芯片主体 */
.chip-body {
width: 200px;
height: 200px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
border-radius: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 30px var(--glow-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
.banner-content {
flex-direction: column;
text-align: center;
}
.banner-text {
max-width: 100%;
margin-bottom: 30px;
}
.banner-title {
font-size: 2rem;
}
.banner-subtitle {
font-size: 18px;
}
.chip-animation {
width: 200px;
height: 200px;
}
}
/* 添加离子背景样式 */
.ion-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
animation: moveBackground 4s linear infinite;
z-index: 1;
}
@keyframes moveBackground {
0% {
background-position: 0 0, 10px 10px;
}
100% {
background-position: 20px 20px, 30px 30px;
}
}
/* 添加优势气泡样式 */
.advantage-bubbles {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.bubble {
background: rgba(255, 71, 87, 0.1);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
color: var(--primary-color);
border: 1px solid rgba(255, 71, 87, 0.2);
animation: float 3s ease-in-out infinite;
box-shadow: 0 0 15px var(--glow-color);
}
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.bubble {
font-size: 12px;
padding: 6px 12px;
}
}
/* 调整表格样式 */
.table-exam {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.table-exam th,
.table-exam td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #e6e6e6;
}
.table-exam th {
background-color: #f5f7fa; /* 表头背景保持浅灰色 */
font-weight: 600;
}
.table-exam tr:hover {
background-color: #f9f9f9; /* 行悬停背景保持浅灰色 */
}
/* 调整分页器样式 */
.pager {
margin-top: 20px;
text-align: center;
}
/* 响应式设计保持不变 */
@media (max-width: 1024px) {
.container {
grid-template-columns: 1fr;
}
.sidenav {
grid-column: 1 / -1;
}
.main-content {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.table-exam th,
.table-exam td {
padding: 8px;
}
}
/* 模块容器样式 */
.module-section {
width: 100%;
padding: 60px 0;
}
/* 示例：应用场景模块 */
.application-section {
background: var(--card-bg);
}
/* 示例：薪资模块 */
.salary-section {
background: #f8f9fa;
}
/* 示例：FAQ模块 */
.faq-section {
background: var(--card-bg);
}
/* 其他模块样式... */
/* 添加气泡样式 */
.bubble-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 15px;
}
.bubble {
background: rgba(255, 71, 87, 0.1);
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
color: var(--primary-color);
transition: all 0.3s ease;
border: 1px solid rgba(255, 71, 87, 0.2);
}
.bubble:hover {
background: rgba(255, 71, 87, 0.2);
transform: translateY(-3px);
}
/* 优化卡片样式 */
.application-card {
text-align: center;
}
/* 响应式设计 */
@media (max-width: 768px) {
.bubble {
font-size: 12px;
padding: 6px 12px;
}
}
/* 新增FPGA厂商模块 */
.vendor-section {
background: #f8f9fa;
}
.vendor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 20px;
}
.vendor-card {
background: var(--card-bg);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.vendor-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 响应式设计 */
@media (max-width: 768px) {
.vendor-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 10px;
}
.vendor-card {
padding: 20px;
}
}
/* 更新按钮样式 */
.btn-primary {
background-color: #ff4757;
border-color: #ff4757;
color: #ffffff;
}
.btn-primary:hover {
background-color: #ff6b81;
border-color: #ff6b81;
}
/* 更新气泡样式 */
.bubble {
background: rgba(255, 71, 87, 0.1);
color: var(--primary-color);
border: 1px solid rgba(255, 71, 87, 0.2);
}
.bubble:hover {
background: rgba(255, 71, 87, 0.2);
}
/* 更新图标颜色 */
.card-icon {
color: var(--primary-color);
}
/* 更新薪资卡片样式 */
.card-salary {
color: var(--primary-color);
}
/* 更新分页样式 */
.pager li.active a {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: #ffffff;
}
.pager li a:hover {
background-color: #f8f9fa;
}
/* 优化核心特点模块样式 */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.feature-card {
background: var(--card-bg);
border-radius: 12px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-icon {
font-size: 36px;
color: var(--primary-color);
margin-bottom: 20px;
}
.card-title {
font-size: 20px;
font-weight: 600;
color: var(--text-color);
margin-bottom: 15px;
}
.bubble-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.bubble {
background: rgba(255, 71, 87, 0.1);
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
color: var(--primary-color);
transition: all 0.3s ease;
border: 1px solid rgba(255, 71, 87, 0.2);
}
.bubble:hover {
background: rgba(255, 71, 87, 0.2);
transform: translateY(-3px);
}
/* 响应式设计 */
@media (max-width: 768px) {
.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 10px;
}
.feature-card {
padding: 20px;
}
.card-icon {
font-size: 28px;
margin-bottom: 15px;
}
.card-title {
font-size: 18px;
}
.bubble {
font-size: 12px;
padding: 4px 10px;
}
}
/* 更新侧边导航样式 */
.side-nav {
position: fixed;
top: 50%;
right: calc((100% - 1200px) / 2 - 140px);
transform: translateY(-50%);
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
width: 140px; /* 增加宽度 */
box-sizing: border-box; /* 包含padding和border */
}
.side-nav ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.side-nav li {
margin-bottom: 8px;
text-align: center;
width: 100%; /* 确保li占满容器 */
}
.nav-link {
display: block;
padding: 8px 12px; /* 调整内边距 */
background: rgba(255, 71, 87, 0.1);
border-radius: 8px;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 71, 87, 0.2);
text-align: center;
width: 100%; /* 确保按钮占满容器 */
box-sizing: border-box; /* 包含padding和border */
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
/* 响应式设计 */
@media (max-width: 1400px) {
.side-nav {
right: 20px;
}
}
@media (max-width: 768px) {
.side-nav {
display: none;
}
}
/* 使用命名空间限制样式作用范围 */
.fpga-page {
all: initial; /* 重置继承样式 */
}
.fpga-page * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* 重写关键样式 */
.fpga-page .side-nav {
position: fixed;
top: 50%;
right: calc((100% - 1200px) / 2 - 140px);
transform: translateY(-50%);
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
width: 140px;
}
/* 其他样式规则... */
/* 使用!important保护关键样式 */
.fpga-page .nav-link {
display: block !important;
padding: 8px 12px !important;
background: rgba(255, 71, 87, 0.1) !important;
border-radius: 8px !important;
color: #333333 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
border: 1px solid rgba(255, 71, 87, 0.2) !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.fpga-page .nav-link:hover {
background: #ff4757 !important;
color: #ffffff !important;
transform: translateY(-3px) !important;
box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3) !important;
}
// 使用事件委托优化事件监听
document.body.addEventListener('click', (e) => {
if (e.target.closest('.faq-question')) {
const faqItem = e.target.closest('.faq-item');
faqItem.classList.toggle('active');
}
});
// CLB动画优化
const clbArray = document.querySelector('.clb-array');
const clbs = Array.from({length: 36}, () => {
const clb = document.createElement('div');
clb.className = 'clb-unit';
return clb;
});
clbArray.append(...clbs);
const randomActivate = () => {
clbs.forEach(clb => clb.classList.remove('active'));
const activeCount = Math.floor(Math.random() * 8) + 3;
new Set(Array.from({length: activeCount}, () =>
Math.floor(Math.random() * clbs.length)
)).forEach(index => clbs[index].classList.add('active'));
};
setInterval(randomActivate, 2000);
// 平滑滚动效果
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
targetElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});
});
FPGA是什么？
现场可编程门阵列 - 硬件界的"变形金刚"
⚡ 硬件加速
🔄 灵活可重构
💡 低功耗
🚀 高性能
FPGA的核心特点
FPGA的独特优势与技术特性
可编程性
硬件逻辑可重构
支持多种硬件描述语言
灵活适应不同应用场景
并行计算
同时执行多个任务
提高计算效率
适合实时处理
低延迟
硬件级处理速度
减少数据传输延迟
适合高实时性应用
高性能
处理复杂算法
高吞吐量
优化系统性能
硬件加速
专用硬件实现
提升计算速度
降低CPU负载
实时处理
即时响应
低延迟处理
适合时间敏感应用
FPGA的应用场景
探索FPGA在各个领域的广泛应用
人工智能
神经网络加速器设计
深度学习模型硬件加速
边缘AI计算平台开发
智能视觉处理系统
通信设备
5G基站信号处理
光通信系统开发
无线通信协议实现
网络数据包处理
工业控制
PLC控制系统开发
工业机器人控制
运动控制系统设计
工业物联网网关
图像处理
视频编解码加速
图像识别系统
实时视频处理
医疗影像处理
汽车电子
ADAS系统开发
自动驾驶计算平台
车载娱乐系统
车联网网关
军工航天
雷达信号处理
卫星通信系统
飞行控制系统
加密通信设备
金融计算
高频交易系统
风险分析加速
加密算法加速
大数据处理
医疗设备
医学影像处理
生命体征监测
医疗机器人控制
智能诊断系统
物联网
边缘计算平台
智能网关开发
传感器数据处理
实时数据分析
FPGA工程师薪资
了解行业薪资水平及技能要求
初级工程师
15-25万/年
经验：0-3年
数字电路设计
Verilog/VHDL
FPGA开发流程
仿真验证
时序约束
中级工程师
25-40万/年
经验：3-5年
接口协议开发
IP核设计
系统调试
PCB设计
项目管理
高级工程师
40-60万/年
经验：5-8年
系统架构设计
性能优化
团队管理
方案设计
SoC设计
专家级工程师
60万+/年
经验：8年以上
技术战略规划
跨部门协作
技术预研
行业标准制定
专利撰写
FPGA常见问题解答
点击问题查看详细解答
1. FPGA适合哪些开发者？
▼
FPGA适合电子工程、嵌入式开发、算法优化等领域的开发者，以及对硬件编程感兴趣的程序员。
2. 如何入门FPGA开发？
▼
建议从数字电路基础开始，学习Verilog或VHDL语言，然后使用开发板进行实践。
3. FPGA与CPU/GPU有什么区别？
▼
FPGA是硬件可编程，可以实现真正的并行计算，而CPU/GPU是固定架构的处理器。
4. 学习FPGA需要哪些基础知识？
▼
需要掌握数字电路、计算机组成原理、硬件描述语言等基础知识。
5. FPGA开发需要哪些工具？
▼
需要FPGA开发板、EDA工具（如Vivado、Quartus）、仿真工具等。
6. FPGA开发难度大吗？
▼
相比软件开发，FPGA开发需要硬件思维，但通过系统学习可以掌握。
7. FPGA有哪些应用领域？
▼
广泛应用于通信、人工智能、工业控制、医疗设备等领域。
8. FPGA开发前景如何？
▼
随着5G、AI等技术的发展，FPGA开发人才需求持续增长。
9. 如何选择FPGA开发板？
▼
初学者建议选择资源丰富、文档齐全的开发板，如Xilinx或Intel的入门级产品。
10. FPGA开发需要学习哪些编程语言？
▼
主要学习硬件描述语言Verilog或VHDL，以及一些脚本语言如Tcl。
哪些人可以学习FPGA？
适合学习FPGA的人群及痛点分析
🎓
电子工程学生
理论知识丰富但缺乏实践经验
就业市场竞争激烈，需要差异化优势
传统嵌入式开发岗位趋于饱和
👨💻
嵌入式开发者
软件性能优化遇到瓶颈
需要掌握硬件加速技术
提升系统整体性能的需求
👩🔬
算法工程师
算法在CPU/GPU上运行效率低
需要实现实时处理
降低系统功耗的需求
👨🏭
工业控制工程师
传统PLC性能不足
需要高实时性控制系统
复杂控制算法实现困难
👩💼
职业转型者
传统行业薪资增长缓慢
希望进入高薪技术领域
需要系统化学习路径
👨🔧
硬件爱好者
传统单片机性能受限
实现复杂项目的需求
探索前沿硬件技术
FPGA有哪些厂商
国内外主要FPGA厂商及特点
国外厂商
Xilinx：行业领导者，产品线最全
Intel(Altera)：高性能，生态系统完善
Lattice：低功耗，小尺寸FPGA
Microchip：收购Microsemi，军工领域强
国内厂商
紫光同创：产品线完整，发展迅速
安路科技：中低端市场，性价比高
复旦微电子：军工领域，可靠性强
高云半导体：新兴厂商，创新力强