Merge remote-tracking branch 'refs/remotes/origin/feature/project_dedtail' into main

Conflicts:
	index.html
	src/components/common/Navbar.vue
	src/components/company/AboutUs.vue
	src/components/projects/ProjectShowcase.vue
	src/components/timeline/CompanyTimeline.vue
	src/locales/ja.ts
	src/locales/zh.ts
	src/views/HomePage.vue
This commit is contained in:
lv 2025-08-30 17:00:59 +08:00
commit 86e1a600a7
10 changed files with 1431 additions and 1350 deletions

View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preload" as="image" href="/src/assets/images/hero-bg.jpg" fetchpriority="high"> <!--<link rel="preload" as="image" href="/src/assets/images/hero-bg.jpg" fetchpriority="high">-->
<link rel="preload" as="image" href="images/hero-bg.jpg" fetchpriority="high">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>优阅工作室</title> <title>优阅工作室</title>

View File

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 197 KiB

BIN
public/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 655 KiB

View File

@ -2,7 +2,8 @@
<header class="navbar-container" :class="{ scrolled: isScrolled }"> <header class="navbar-container" :class="{ scrolled: isScrolled }">
<div class="container"> <div class="container">
<div class="logo"> <div class="logo">
<a href="#home">{{ t('nav.home') }}</a> <img src="/images/logo.png" alt="Company Logo" class="logo-image">
<a href="#home">{{ t('nav.name') }}</a>
</div> </div>
<nav> <nav>
<ul class="nav-links"> <ul class="nav-links">
@ -107,6 +108,18 @@ const closeMobileMenu = () => {
padding: 0.8rem 0; */ padding: 0.8rem 0; */
} }
.logo {
display: flex; /* 让Logo和文字横向排列 */
align-items: center; /* 垂直居中对齐 */
gap: 0.5rem; /* Logo与文字间距 */
}
.logo-image {
width: 60px; /* Logo宽度根据需要调整 */
height: 55px; /* 自定义高度,不受宽高比限制 */
/*height: auto; 保持宽高比 */
}
.container { .container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;

View File

@ -28,7 +28,7 @@
</svg> </svg>
</div> </div>
<h4>{{ t('about.advantage1') }}</h4> <h4>{{ t('about.advantage1') }}</h4>
<p>Our team consists of highly skilled professionals with extensive experience in software development.</p> <p>{{ t('about.advantage_explanation1') }}</p>
</div> </div>
<div class="advantage-card"> <div class="advantage-card">
<div class="advantage-icon"> <div class="advantage-icon">
@ -38,7 +38,7 @@
</svg> </svg>
</div> </div>
<h4>{{ t('about.advantage2') }}</h4> <h4>{{ t('about.advantage2') }}</h4>
<p>We prioritize our clients' needs and work closely with them to achieve their business objectives.</p> <p>{{ t('about.advantage_explanation2') }}</p>
</div> </div>
<div class="advantage-card"> <div class="advantage-card">
<div class="advantage-icon"> <div class="advantage-icon">
@ -49,7 +49,7 @@
</svg> </svg>
</div> </div>
<h4>{{ t('about.advantage3') }}</h4> <h4>{{ t('about.advantage3') }}</h4>
<p>We constantly explore new technologies and methodologies to provide innovative solutions.</p> <p>{{ t('about.advantage_explanation3') }}</p>
</div> </div>
<div class="advantage-card"> <div class="advantage-card">
<div class="advantage-icon"> <div class="advantage-icon">
@ -59,7 +59,7 @@
</svg> </svg>
</div> </div>
<h4>{{ t('about.advantage4') }}</h4> <h4>{{ t('about.advantage4') }}</h4>
<p>We deliver projects on time and within budget, ensuring high quality and reliability.</p> <p>{{ t('about.advantage_explanation4') }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -240,6 +240,8 @@ const t = inject<(key: string) => string>('t') || ((key) => key)
.advantage-card p { .advantage-card p {
color: var(--text-muted); color: var(--text-muted);
line-height: 1.6; line-height: 1.6;
text-align: left; /* 文本左对齐 */
margin: 0; /* 可选:移除默认外边距,使对齐更精确 */
} }
@media (max-width: 768px) { @media (max-width: 768px) {

View File

@ -34,27 +34,31 @@ const openDetail = (project: Project) => {
} else if (project.detailPageKey) { } else if (project.detailPageKey) {
// detailPageKey // detailPageKey
const currentLang = store.currentLanguage; // const currentLang = store.currentLanguage; //
console.log('当前语言:', currentLang); // 'zh' 'jp' //console.log(':', currentLang); // 'zh' 'jp'
// //
const routeName = currentLang === 'zh' const routeName = currentLang === 'zh'
? `${project.detailPageKey}Detail` ? `${project.detailPageKey}Detail`
: `${project.detailPageKey}DetailJp`; : `${project.detailPageKey}DetailJp`;
console.log('生成的路由名称:', routeName); // //console.log(':', routeName); //
// //
const routeExists = router.getRoutes().some(route => route.name === routeName); //const routeExists = router.getRoutes().some(route => route.name === routeName);
console.log('路由是否存在:', routeExists); //console.log(':', routeExists);
// ,push
//router.push({ name: routeName });
// // 1
const url = router.resolve({ name: routeName }).href; const url = router.resolve({ name: routeName }).href;
const fullUrl = window.location.origin + url; //
console.log('完整URL:', fullUrl); // http://localhost:5173/project3/zh
window.open(url, '_blank'); window.open(url, '_blank');
// 2window.open
//router.push({
//name: routeName,
// ID
// params: { id: project.id }
// });
} }
}; };

View File

@ -3,11 +3,11 @@
<div class="container"> <div class="container">
<h2 class="section-title">{{ t('timeline.title') }}</h2> <h2 class="section-title">{{ t('timeline.title') }}</h2>
<div class="timeline"> <div class="timeline">
<div v-for="(event, index) in timelineEvents" :key="event.id" class="timeline-item" :class="{ 'timeline-item-right': index % 2 === 1 }"> <div v-for="(timelineEvent,index) in timelineEvents" :key="timelineEvent.id" class="timeline-item" :class="{ 'timeline-item-right': index % 2 === 1 }">
<div class="timeline-content"> <div class="timeline-content">
<div class="timeline-date">{{ event.date }}</div> <div class="timeline-date">{{ t(timelineEvent.date) }}</div>
<h3>{{ event.title }}</h3> <h3>{{ t(timelineEvent.title) }}</h3>
<p>{{ event.description }}</p> <p>{{ t(timelineEvent.description) }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -29,39 +29,39 @@ export interface TimelineEvent {
const timelineEvents = ref<TimelineEvent[]>([ const timelineEvents = ref<TimelineEvent[]>([
{ {
id: 1, id: 1,
date: '2015', date: '2022',
title: 'Company Founded', title: "timelineEvents.timelineEvent1.title",
description: 'Our company was founded with a vision to provide innovative software solutions.', description: "timelineEvents.timelineEvent1.description",
}, },
{ {
id: 2, id: 2,
date: '2016', date: '2022',
title: 'First Project', title: "timelineEvents.timelineEvent2.title",
description: 'We successfully completed our first major project for a leading client.', description: "timelineEvents.timelineEvent2.description",
}, },
{ {
id: 3, id: 3,
date: '2018', date: '2023',
title: 'Team Expansion', title: "timelineEvents.timelineEvent3.title",
description: 'Our team grew to 20 employees with expertise in various technologies.', description: "timelineEvents.timelineEvent3.description",
}, },
{ {
id: 4, id: 4,
date: '2020', date: '2024',
title: 'Product Launch', title: "timelineEvents.timelineEvent4.title",
description: 'We launched our first proprietary software product.', description: "timelineEvents.timelineEvent4.description",
}, },
{ {
id: 5, id: 5,
date: '2022', date: '2025',
title: 'International Expansion', title: "timelineEvents.timelineEvent5.title",
description: 'We expanded our operations to serve clients worldwide.', description: "timelineEvents.timelineEvent5.description",
}, },
{ {
id: 6, id: 6,
date: '2023', date: '2025',
title: 'Industry Recognition', title: "timelineEvents.timelineEvent6.title",
description: 'Our company received multiple awards for excellence in software development.', description: "timelineEvents.timelineEvent6.description",
}, },
]) ])

View File

@ -1,26 +1,31 @@
export default { export default {
nav: { nav: {
name:'優閲スタジオ',
home: 'ホーム', home: 'ホーム',
about: '会社概要', about: '私たちについて',
team: 'チーム紹介', team: 'メンバー',
projects: 'プロジェクト', projects: '開発実績',
contact: 'お問い合わせ', contact: 'お問い合わせ',
}, },
about: { about: {
title: '会社概要', title: '私たちについて',
mission: '私たちの使命', mission: 'チーム理念',
vision: '私たちのビジョン', vision: 'ビジョン',
advantages: '私たちの強み', advantages: '私たちの強み',
content: '私たちは、お客様に高品質なソリューションを提供することに専念するプロフェッショナルなソフトウェア開発会社です。', content: '私たちは、ソフトウェア開発をはじめ、翻訳・BPOなどの業務を手がける専門サービスチームです',
missionContent: 'ビジネスの成長とデジタル変革を推進する革新的な技術ソリューションを提供します。', missionContent: '「お客様のビジネス成長とデジタル変革を実現するために、革新的な技術ソリューションを創造します」',
visionContent: '技術的卓越性と顧客満足度で認められる、世界をリードするソフトウェア開発サービスプロバイダーになること。', visionContent: '「小さくとも優れた技術チームとして、技術の匠心でお客様の成功を支えます」',
advantage1: '技術的卓越性', advantage1: '低コスト',
advantage2: '顧客中心のアプローチ', advantage2: '迅速な判断',
advantage3: '革新', advantage3: '柔軟な対応',
advantage4: '信頼性', advantage4: '実績と信頼',
advantage_explanation1:'大手企業のように固定費(高額な賃料・管理部門人件費・ブランド広告費など)の負担がありません。このコスト優位性を最大限に活かし、業界でも類を見ない低価格水準を実現しております。',
advantage_explanation2:'小規模なチーム体制のため、複雑な稟議・承認プロセスが一切ありません。責任者や技術責任者などの中核メンバーが直接迅速に判断するため、お客様のご要望に素早く応えます。',
advantage_explanation3:'小規模な個人のお客様から大規模な法人案件まで、あらゆるデータ処理に対応できるプロフェッショナルです。小ロットから大量発注、緊急のご依頼まで、状況に応じて臨機応変に対応いたします。',
advantage_explanation4:'大手企業から官公庁、個人事業主の方まで、多岐にわたるお取引実績がございます。特に金融・保険・製造・商社・物流など多様な業界のお客様から厚い信頼をいただいております。',
}, },
team: { team: {
title: 'チーム紹介', title: 'メンバー',
memberRole: '役職', memberRole: '役職',
memberBio: 'プロフィール', memberBio: 'プロフィール',
member1: {name: "陳 迪",role: "スタジオ代表", member1: {name: "陳 迪",role: "スタジオ代表",
@ -50,7 +55,7 @@ export default {
}, },
projects: { projects: {
title: 'プロジェクト', title: '実績概要',
viewDetails: '詳細を見る', viewDetails: '詳細を見る',
project1: { project1: {
title: "航空券管理システム", title: "航空券管理システム",
@ -66,13 +71,39 @@ export default {
}, },
project4: { project4: {
title: "工業生産管理システム", title: "工業生産管理システム",
description: "当システムは、マーケティング管理、生産計画、資材管理、工程管理、設備監視および品質管理などの各工程を統合し、生産プロセスの可視化と細やかな管理を実現します。リソースの最適な配分を図り、生産効率と製品品質を向上させ、運営コストを削減することで、企業のスマート化進展を推進します。", description: "当システムは、国のDX推進に応じて開発されたもので、マーケティング管理、生産計画、資材管理、工程管理、設備監視および品質管理などの各工程を統合し、生産プロセスの可視化と細やかな管理を実現します。リソースの最適な配分を図り、生産効率と製品品質を向上させ、運営コストを削減することで、企業のスマート化進展を推進します。",
}, },
project5: { project5: {
title: "地図拡張システム", title: "地図拡張システム",
description: "本システムは、プロフェッショナル向けに設計された地図拡張ツールです。利用者は地図の閲覧や情報検索だけでなく、多彩な操作を地図上で実行可能。特定エリアやルートのマーキング機能に加え、2地点間の正確な距離測定や指定領域の面積計算も可能です。さらに強力な比較機能を搭載し、専門家の業務をサポートする高精度なデータを提供します。", description: "本システムは、プロフェッショナル向けに設計された地図拡張ツールです。利用者は地図の閲覧や情報検索だけでなく、多彩な操作を地図上で実行可能。特定エリアやルートのマーキング機能に加え、2地点間の正確な距離測定や指定領域の面積計算も可能です。さらに強力な比較機能を搭載し、専門家の業務をサポートする高精度なデータを提供します。",
}, },
}, },
timelineEvents: {
timelineEvent1: {
title: "スタジオ設立",
description: "",
},
timelineEvent2: {
title: "航空券管理システム",
description: "初の日本案件(一部)受注",
},
timelineEvent3: {
title: "地図拡張システム",
description: "大型案件(一部)参画",
},
timelineEvent4: {
title: "農作物管理・買取システム",
description: "機能開発・保守",
},
timelineEvent5: {
title: "勤怠管理システム",
description: "機能開発・保守",
},
timelineEvent6: {
title: "工業生産管理システム",
description: "DX推進、独立開発開発中",
},
},
contact: { contact: {
title: 'お問い合わせ', title: 'お問い合わせ',
name: 'お名前', name: 'お名前',
@ -84,7 +115,7 @@ export default {
error: 'メッセージの送信に失敗しました。もう一度お試しください。', error: 'メッセージの送信に失敗しました。もう一度お試しください。',
}, },
timeline: { timeline: {
title: '会社の沿革', title: 'タイムライン',
}, },

View File

@ -1,5 +1,6 @@
export default { export default {
nav: { nav: {
name:'优阅工作室',
home: '首页', home: '首页',
about: '关于我们', about: '关于我们',
team: '团队介绍', team: '团队介绍',
@ -8,16 +9,20 @@ export default {
}, },
about: { about: {
title: '关于我们', title: '关于我们',
mission: '我们的使命', mission: '团队理念',
vision: '我们的愿景', vision: '我们的愿景',
advantages: '我们的优势', advantages: '我们的优势',
content: '我们是一家专业的软件开发团队,致力于为客户提供高质量的解决方案。', content: '我们是一家从事软件开发以及翻译、BPO等业务的专业服务团队',
missionContent: '提供创新的技术解决方案,推动业务增长和数字化转型。', missionContent: '用创新技术,助力客户实现业务增长与数字化转型。',
visionContent: '成为全球领先的软件开发服务提供商,以技术卓越和客户满意度著称。', visionContent: '做小而美的技术团队,以技术匠心成就客户成功。',
advantage1: '技术卓越', advantage1: '低成本',
advantage2: '以客户为中心', advantage2: '快速决策',
advantage3: '创新精神', advantage3: '灵活应对多样化需求',
advantage4: '可靠性', advantage4: '丰富的业界经验',
advantage_explanation1:'工作室无大型企业的 “固定成本包袱”(如高额房租、行政人员薪资、品牌营销费用等),可以充分发挥工作室运营的成本优势,实现行业的低价格水平。',
advantage_explanation2:'得益于小规模团队架构,我们完全无需复杂的层层汇报与审批流程。由负责人及技术主管等核心成员直接迅速做出判断,及时响应您的各类需求。',
advantage_explanation3:'由专业人士组成的团队,能够处理从个人小规模项目到企业大规模项目在内的各种数据处理业务。无论小批量、大批量还是紧急订单,我们都能灵活应对。',
advantage_explanation4:'我们拥有广泛的合作经验,客户涵盖大型企业、政府机关及个人经营者。尤其深受金融,保险,生产加工、贸易公司、物流等多行业客户的信赖。',
}, },
team: { team: {
title: '我们的团队', title: '我们的团队',
@ -25,10 +30,9 @@ export default {
memberBio: '简介', memberBio: '简介',
member1: { member1: {
name: "陈迪",role: "工作室总负责人", name: "陈迪",role: "工作室总负责人",
bio:`拥有日本留学与职业背景:先后就读于秋田大学及名古屋大学大学院,毕业后入职日本大型商社,在国际化商业环境中积累了宝贵的实战经验, bio:`先后就读于秋田大学及名古屋大学大学院,毕业后入职日本大型商社,在国际化商业环境中积累了宝贵的实战经验,
BPO BPO
SEBSE及 PM Web SEBSE及 PM Web `},
`},
member2: {name: "梁伟",role: "技术总负责人", member2: {name: "梁伟",role: "技术总负责人",
bio:`拥有 10 年以上 web 开发经验,长期专注对日项目。精通前端 Vue、React、JavaScript 及 HTML5后端 Java、Python 及 Spring Boot、 bio:`拥有 10 年以上 web 开发经验,长期专注对日项目。精通前端 Vue、React、JavaScript 及 HTML5后端 Java、Python 及 Spring Boot、
Django Django
@ -58,18 +62,44 @@ export default {
description: "本系统连接农户与采购商,提供农产品管理,天气预报,病虫害管理,信息发布、在线洽谈、订单管理、质量追溯与电子结算等服务,打破信息壁垒,优化交易流程,促进农产品高效流通,助力农业增效、农户增收。", description: "本系统连接农户与采购商,提供农产品管理,天气预报,病虫害管理,信息发布、在线洽谈、订单管理、质量追溯与电子结算等服务,打破信息壁垒,优化交易流程,促进农产品高效流通,助力农业增效、农户增收。",
}, },
project3: { project3: {
title: "勤管理系统", title: "勤管理系统",
description: "系统通过考勤机、移动端等多方式记录员工上下班时间、请假、加班等信息,自动统计分析出勤数据,生成考勤报表,简化人事管理流程,确保考勤准确公正,为薪资计算和绩效考核提供可靠依据。", description: "系统通过考勤机、移动端等多方式记录员工上下班时间、请假、加班等信息,自动统计分析出勤数据,生成考勤报表,简化人事管理流程,确保考勤准确公正,为薪资计算和绩效考核提供可靠依据。",
}, },
project4: { project4: {
title: "工业生产管理系统", title: "工业生产管理系统",
description: "本系统是一款专业的生产加工行业的数字化系统,整合营销管理,生产计划、物料管理、工艺流程、设备监控与质量控制等环节,实现生产过程的可视化、精细化管理,优化资源配置,提高生产效率与产品质量,降低运营成本,推动企业智能化升级。", description: "本系统是一款为响应国家数字化转型战略而打造的工业数字化系统,整合营销管理,生产计划、物料管理、工艺流程、设备监控与质量控制等环节,实现生产过程的可视化、精细化管理,优化资源配置,提高生产效率与产品质量,降低运营成本,推动企业智能化升级。",
}, },
project5: { project5: {
title: "地图扩展系统", title: "地图扩展系统",
description: "本系统是为专业人士打造的地图扩展工具。操作者不仅能进行地图阅览与信息查询,还可在地图上开展丰富操作;支持对特定区域、线路等进行标记,能够精准测量地图上任意两点间的距离以及特定区域的面积;同时具备强大的对比功能,为专业人士提供精确数据支撑。", description: "本系统是为专业人士打造的地图扩展工具。操作者不仅能进行地图阅览与信息查询,还可在地图上开展丰富操作;支持对特定区域、线路等进行标记,能够精准测量地图上任意两点间的距离以及特定区域的面积;同时具备强大的对比功能,为专业人士提供精确数据支撑。",
}, },
}, },
timelineEvents: {
timelineEvent1: {
title: "工作室成立",
description: "",
},
timelineEvent2: {
title: "机票管理系统",
description: "首个对日项目(一部分)参与",
},
timelineEvent3: {
title: "地图扩展系统",
description: "大型项目(一部分)参与",
},
timelineEvent4: {
title: "农作物交易系统",
description: "功能开发和保守",
},
timelineEvent5: {
title: "考勤管理系统",
description: "功能开发和保守",
},
timelineEvent6: {
title: "工业生产管理系统",
description: "数字化转型项目,独立开发(进行中)",
},
},
contact: { contact: {
title: '联系我们', title: '联系我们',
name: '您的姓名', name: '您的姓名',
@ -81,6 +111,6 @@ export default {
error: '发送留言失败,请重试。', error: '发送留言失败,请重试。',
}, },
timeline: { timeline: {
title: '公司历程', title: '项目经历',
}, },
} }

View File

@ -57,7 +57,7 @@ const t = inject<(key: string) => string>('t') || ((key) => key)
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/src/assets/images/hero-bg.jpg'); /* 绝对路径,基于项目根目录 */ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/hero-bg.jpg'); /* 绝对路径,基于项目根目录 */
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-attachment: fixed; background-attachment: fixed;