diff --git a/src/App.vue b/src/App.vue
index ca451b1..514cd66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,7 +22,7 @@
 <style>
 	@font-face {
 	  font-family: 'MyCustomFont';
-	  src: url('./static/font/NotoSansThai-Medium.woff');
+	  src: url('./static/font/Prompt-Regular.ttf');
 	}
 	body {
 		font-family: 'MyCustomFont',sans-serif!important;
diff --git a/src/assets/images/dingwei.png b/src/assets/images/dingwei.png
new file mode 100644
index 0000000..4ddde17
Binary files /dev/null and b/src/assets/images/dingwei.png differ
diff --git a/src/assets/images/job_back.png b/src/assets/images/job_back.png
new file mode 100644
index 0000000..93a539f
Binary files /dev/null and b/src/assets/images/job_back.png differ
diff --git a/src/assets/images/job_backimg.png b/src/assets/images/job_backimg.png
deleted file mode 100644
index 0ac26b9..0000000
Binary files a/src/assets/images/job_backimg.png and /dev/null differ
diff --git a/src/assets/images/xinzi.png b/src/assets/images/xinzi.png
new file mode 100644
index 0000000..d07b144
Binary files /dev/null and b/src/assets/images/xinzi.png differ
diff --git a/src/components/NavContainer.vue b/src/components/NavContainer.vue
index 87987cc..a1adc5d 100644
--- a/src/components/NavContainer.vue
+++ b/src/components/NavContainer.vue
@@ -126,7 +126,7 @@
 		},
 		{
 			name: "recruitment",
-			type: '/job/joblist'
+			type: '/joblist'
 		},
 		{
 			name: "problem",
diff --git a/src/pages/H5/Join/JobDetail.vue b/src/pages/H5/Join/JobDetail.vue
index e8c0d62..7514233 100644
--- a/src/pages/H5/Join/JobDetail.vue
+++ b/src/pages/H5/Join/JobDetail.vue
@@ -1,162 +1,169 @@
-<template>
-    <div class="job-detail">
-        <div class="job-detail-title">
-            เจ้าหน้าที่ตรวจสอบสินเชื่อ
-        </div>
-        <div class="job-detail-logo">
-            <img class="gojob_logo" src="../../../assets/images/job_logo.png" alt="" />
-        </div>
-        <div class="job-content">
-            <div class="job-content-item" v-for="item in list">
-                <div class="job-content-item-title">
-                    {{ item.title }}
-                </div>
-                <div class="job-content-item-detail">
-                    <div class="job-content-item-detail-item" v-for="i in item.content">
-                        {{ i }}
-                    </div>
-                </div>
-
-            </div>
-            <div class="job-content-item">
-                <div class="job-content-item-title">
-                    ช่องทางติดต่อ
-                </div>
-                <div class="job-content-item-detail">
-                    <div class="job-content-item-detail-item" v-for="item in userInfo">
-                        <div class="job-content-item-detail-label">
-                            {{ item.label }}
-                        </div>
-                        <div class="job-content-item-detail-content">
-                            {{ item.content }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup name="join">
-import { ref } from 'vue';
-const list = [{
-    title: 'รายละเอียดงาน',
-    content: [
-        '1、ตรวจสอบและวิเคราะห์คุณสมบัติของลูกค้าตามเกณฑ์ที่กำหนด ก่อนอนุมัติสินเชื่อ',
-        '2、ประเมินเอกสารและข้อมูลทางการเงิน เช่น บัตรประจำตัวประชาชน เอกสารการเงิน และประวัติการกู้ยืม',
-        '3、ตัดสินใจอนุมัติหรือปฏิเสธคำขอเช่าตามนโยบายความเสี่ยงของบริษัท',
-        '4、ตรวจสอบความถูกต้องของสัญญาเช่าและกระบวนการอนุมัติ เพื่อให้แน่ใจว่าสอดคล้องกับมาตรฐานและข้อกำหนดของบริษัท',
-        '5、รายงานความเสี่ยงและแนวโน้มที่อาจเกิดขึ้น พร้อมทั้งเสนอวิธีป้องกันหรือปรับปรุงกระบวนการ'
-    ]
-}, {
-    title: 'คุณสมบัต',
-    content: [
-        '1. ปริญญาตรีขึ้นไป สาขาการเงิน เศรษฐศาสตร์ การจัดการความเสี่ยง สถิติศาสตร์ หรือสาขาอื่นที่เกี่ยวข้องจะพิจารณาเป็นพิเศษ',
-        '2. มีประสบการณ์ทำงานด้านการตรวจสอบความเสี่ยง การประเมินเครดิต หรืออุตสาหกรรมการเงินอย่างน้อย 1 ปี ผู้ที่มีประสบการณ์ในอุตสาหกรรมเช่า สินเชื่อขนาดเล็ก หรือธนาคารจะได้รับการพิจารณาเป็นพิเศษ',
-        '3. เข้าใจกระบวนการจัดการความเสี่ยงและแบบจำลองการประเมินเครดิต รวมถึงกฎหมายที่เกี่ยวข้อง',
-        '4. มีความสามารถในการวิเคราะห์ข้อมูลและความไวต่อความเสี่ยง สามารถประเมินความเสี่ยงได้ด้วยตัวเองได้เป็นอย่างด',
-        '5. มีความชำนาญในการใช้โปรแกรมสำนักงาน และมีประสบการณ์ในการใช้งานระบบจัดการความเสี่ยงจะได้รับการพิจารณาเป็นพิเศษ',
-    ]
-}, {
-    title: 'วิธีการสมัคร',
-    content: [
-        'กรุณาส่งเรซูเม่ของคุณมาที่อีเมลล โดยระบุหัวข้ออีเมลเป็น “ชื่อตำแหน่งงาน + ชื่อของคุณ” หรือสามารถติดต่อเราผ่านทางโทรศัพท์หรือ Line เพื่อขอข้อมูลเพิ่มเติม'
-    ]
-}]
-
-const userInfo = [{
-    label: 'ที่อยู่:',
-    content: '135/21 อาคารอามรพันธุ์ 205 ทาวเวอร์ 2 ชั้น 9 ซอยนาทอง ถนนรัชดาภิเษก แขวงดินแดง เขตดินแดง กรุงเทพ 10400 สาขา 00001'
-}, {
-    label: 'Tel:',
-    content: '0888000282'
-}, {
-    label: 'Line:',
-    content: '@octop'
-}, {
-    label: 'E-mail:',
-    content: 'Job@octoprental.com'
-}]
-
-</script>
-
-<style scoped lang="scss">
-.job-detail {
-    width: 100%;
-    margin: 50px 0 0;
-    min-height: 80vh;
-    max-width: 750px;
-    margin: 0 auto;
-    min-height: 80vh;
-    background-color: #fff;
-    padding: 20px;
-
-    .job-detail-title {
-        font-family: Prompt, Prompt;
-        font-weight: bold;
-        font-size: 16px;
-        color: #333333;
-    }
-
-    .job-detail-logo {
-        width: 70px;
-        margin-top: 8PX;
-    }
-
-    .job-content {
-        .job-content-item {
-            margin-top: 20px;
-
-            .job-content-item-title {
-                font-weight: 500;
-                font-size: 14px;
-                color: #333333;
-                position: relative;
-                padding-left: 8px;
-
-                &::before {
-                    position: absolute;
-                    content: '';
-                    height: 12px;
-                    width: 3px;
-                    background: #267FFA;
-                    border-radius: 15px;
-                    top: 5px;
-                    left: 0;
-
-                }
-            }
-
-            .job-content-item-detail {
-                margin-top: 8px;
-
-                .job-content-item-detail-item {
-                    font-weight: 300;
-                    font-size: 13px;
-                    color: #000000;
-                    line-height: 25px;
-                    display: flex;
-                    align-items: baseline;
-
-                    .job-content-item-detail-label {
-                        font-weight: 400;
-                        font-size: 13px;
-                        color: #000000;
-                        width: 50px;
-                    }
-
-                    .job-content-item-detail-content {
-                        font-family: Prompt, Prompt;
-                        font-weight: 300;
-                        font-size: 13px;
-                        color: #000000;
-                        width: calc(100% - 80px);
-                    }
-                }
-            }
-
-
-        }
-    }
-}
+<template>
+	<div class="job-detail">
+		<!-- 动态渲染岗位名称 -->
+		<div class="job-detail-title">
+			{{ currentJob.title }}
+		</div>
+		<div class="salary-detail">
+			<img class="salary-img" src="../../../assets/images/xinzi.png" alt="" />
+			<text>{{ currentJob.salary }}</text>
+		</div>
+		<div class="address-detail">
+			<img class="address-img" src="../../../assets/images/dingwei.png" alt="" />
+			<text> เขตห้วยขวาง กรุงเทพมหานคร</text>
+		</div>
+		<div class="job-detail-logo">
+			<img class="gojob_logo" src="../../../assets/images/job_logo.png" alt="公司Logo" />
+		</div>
+		<!-- 动态渲染岗位详情（职责/要求/申请方式） -->
+		<div class="job-content">
+			<div class="job-content-item" v-for="(item, idx) in currentJob.list" :key="idx">
+				<div class="job-content-item-title">
+					{{ item.title }}
+				</div>
+				<div class="job-content-item-detail">
+					<div class="job-content-item-detail-item" v-for="(i, iIdx) in item.content" :key="iIdx">
+						{{ i }}
+					</div>
+				</div>
+			</div>
+			<!-- 联系方式（所有岗位统一） -->
+			<div class="job-content-item">
+				<div class="job-content-item-title">
+					ช่องทางติดต่อ
+				</div>
+				<div class="job-content-item-detail">
+					<div class="job-content-item-detail-item" v-for="(item, idx) in userInfo" :key="idx">
+						<div class="job-content-item-detail-label">
+							{{ item.label }}
+						</div>
+						<div class="job-content-item-detail-content">
+							{{ item.content }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup name="JobDetail">
+	import { ref, computed, reactive } from 'vue';
+	import { useRoute } from 'vue-router';
+	import { allJobs, userInfo } from './jobData.ts';
+	//接收路由参数（从JobList传递的id）
+	const route = useRoute();
+	const jobId = route.params.id;
+
+	//根据id匹配当前岗位数据
+	const currentJob = computed(() => {
+		return allJobs.find(job => job.id === Number(jobId))
+			|| { title: 'ไม่มีโพสต์', salary: '', list: [{ title: 'คำแนะนำ', content: ['ไม่พบข้อมูลตำแหน่งที่ตรงกันโปรดตรวจสอบว่าการเชื่อมโยงถูกต้อง'] }] };
+	});
+</script>
+
+<style scoped lang="scss">
+	.job-detail {
+		width: 100%;
+		margin: 50px 0 0;
+		min-height: 80vh;
+		max-width: 750px;
+		margin: 0 auto;
+		min-height: 80vh;
+		background-color: #fff;
+		padding: 20px;
+
+		.job-detail-title {
+			font-weight: bold;
+			font-size: 16px;
+			color: #333333;
+		}
+
+		.salary-detail {
+			font-weight: 600;
+			font-size: 14px;
+			color: #F32D2D;
+			margin-top: 5px;
+			display: flex;
+			align-items: center;
+
+			.salary-img {
+				width: 16px;
+				height: 16px;
+				margin-right: 4px;
+			}
+		}
+
+		.address-detail {
+					font-weight: 600;
+					font-size: 14px;
+					color: #999999;
+					margin-top: 5px;
+					display: flex;
+					align-items: center;
+					.address-img{
+						width: 16px;
+						height: 16px;
+					}
+				}
+
+		.job-detail-logo {
+			width: 70px;
+			margin-top: 8px;
+		}
+
+		.job-content {
+			margin-bottom: 100px;
+
+			.job-content-item {
+				margin-top: 20px;
+
+				.job-content-item-title {
+					font-weight: 600;
+					font-size: 14px;
+					color: #333333;
+					position: relative;
+					padding-left: 8px;
+
+					&::before {
+						position: absolute;
+						content: '';
+						height: 12px;
+						width: 3px;
+						background: #267FFA;
+						border-radius: 15px;
+						top: 5px;
+						left: 0;
+					}
+				}
+
+				.job-content-item-detail {
+					margin-top: 8px;
+
+					.job-content-item-detail-item {
+						font-weight: 300;
+						font-size: 13px;
+						color: #000000;
+						line-height: 25px;
+						display: flex;
+						align-items: baseline;
+
+						.job-content-item-detail-label {
+							font-weight: 400;
+							font-size: 13px;
+							color: #000000;
+							width: 50px;
+						}
+
+						.job-content-item-detail-content {
+							font-weight: 300;
+							font-size: 13px;
+							color: #000000;
+							width: calc(100% - 80px);
+						}
+					}
+				}
+			}
+		}
+	}
 </style>
\ No newline at end of file
diff --git a/src/pages/H5/Join/JobList.vue b/src/pages/H5/Join/JobList.vue
index 24b4979..8d6379b 100644
--- a/src/pages/H5/Join/JobList.vue
+++ b/src/pages/H5/Join/JobList.vue
@@ -1,31 +1,71 @@
 <template>
 	<div class="content">
 		<div class="listCont">
-			<img class="cardimg" src="../../../assets/images/job_backimg.png" alt="暂无图片" />
-			<div class="listCard">
-				<router-link to="/jobdetail" class="nav-font">
+			<img class="cardimg" src="../../../assets/images/job_back.png" alt="暂无图片" />
+			<div class="listCard" v-for="item in jobList">
+				<router-link :to="{name: 'JobDetail', params: { id: item.id } }" class="nav-font">
 					<div class="listitem">
-						<div class="title">เจ้าหน้าที่ตรวจสอบสินเชื่อ</div>
-						<div class="salary">15,000 - 30,000 THB</div>
+						<div class="title">{{item.name}}</div>
+						<div class="salary">
+							<img class="salary-img" src="../../../assets/images/xinzi.png" alt="" />
+							<text>{{item.money}}</text>
+						</div>
+						<div class="address">
+							<img class="address-img" src="../../../assets/images/dingwei.png" alt="" />
+							<text>{{item.address}}</text>
+						</div>
 						<div class="gojob">
 							<img class="gojob_logo" src="../../../assets/images/job_logo.png" alt="" />
 							<div class="gojob_but">คลิกดูด่วน</div>
 						</div>
 					</div>
 				</router-link>
-			</div>
-			<!-- <img src="url('../../../assets/images/job_back.png')" alt="" /> -->
+			</div> 
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup name="join">
-// import { ref } from 'vue';
-// const jumpToDetail = () => {
-// 	console.log(1111);
-
-// }
-
+import { ref } from 'vue';
+const jobList = ref([
+		{
+			name: "เจ้าหน้าที่ตรวจสอบสินเชื่อ",
+			money: "15,000 - 30,000 THB",
+			address:"เขตห้วยขวาง กรุงเทพมหานคร",
+			id:1
+		},
+		{
+			name: "เจ้าหน้าที่เร่งรัดหนี้สินทางโทรศัพท์ ",
+			money: "12000 - 15,000 + ค่าคอมมิชชั่น",
+			address:"เขตห้วยขวาง กรุงเทพมหานคร",
+			id:2
+		},
+		{
+			name: "Content Creator & VDO Editor",
+			money: "15,000 - 40,000 THB",
+			address:"เขตห้วยขวาง กรุงเทพมหานคร",
+			id:3
+		},
+		{
+			name: "งานโปรโมทแพลตฟอร์ม",
+			money: "500 - 800 THB (Daily)",
+			address:"เขตห้วยขวาง กรุงเทพมหานคร",
+			id:4
+		},
+		{
+			name: "ล่ามจีน",
+			money: "15,000 - 40,000 บาท",
+			address:"เขตห้วยขวาง กรุงเทพมหานคร",
+			id:5
+		},
+		{
+			name: "Senior Online Marketing",
+			money: "40,000 - 60,000 บาท",
+			address:"เขตห้วยขวาง กรุงเทพมหานคร",
+			id:6
+		}
+		
+	])
 
 </script>
 <style scoped lang="scss">
@@ -37,38 +77,52 @@
 	margin: 0 auto;
 
 	.listCont {
-
-		// width: 750px;
 		width: 100%;
-
 		.listCard {
 			width: 100%;
 			padding: 0 10px;
 			position: relative;
 			top: -75px;
-
+			margin-bottom: 0.75rem;
 			.listitem {
 				background: #ffffff;
 				width: 100%;
-				height: 114px;
+				height: 144px;
 				border-radius: 10px;
 				padding: 14px 20px;
 
 				.title {
-					font-family: Prompt, Prompt;
 					font-weight: bold;
 					font-size: 16px;
 					color: #333333;
 				}
 
 				.salary {
-					font-family: Prompt, Prompt;
 					font-weight: 600;
 					font-size: 14px;
 					color: #F32D2D;
-					margin-top: 3px;
+					margin-top: 5px;
+					display: flex;
+					align-items: center;
+					.salary-img{
+						width: 16px;
+						height: 16px;
+						margin-right: 4px;
+					}
+				}
+				.address{
+					font-weight: 600;
+					font-size: 14px;
+					color: #999999;
+					margin-top: 5px;
+					display: flex;
+					align-items: center;
+					.address-img{
+						width: 16px;
+						height: 16px;
+						margin-right: 4px;
+					}
 				}
-
 				.gojob {
 					display: flex;
 					justify-content: space-between;
@@ -86,7 +140,6 @@
 						height: 26px;
 						background: rgba(38, 127, 250, 0.15);
 						border-radius: 4px;
-						font-family: Prompt, Prompt;
 						font-size: 14px;
 						color: #267FFA;
 						line-height: 26px;
diff --git a/src/pages/H5/Join/jobData.ts b/src/pages/H5/Join/jobData.ts
new file mode 100644
index 0000000..c6ed487
--- /dev/null
+++ b/src/pages/H5/Join/jobData.ts
@@ -0,0 +1,216 @@
+export const allJobs = [
+    {
+        id: 1,
+        title: "เจ้าหน้าที่ตรวจสอบสินเชื่อ",
+				salary:'15,000 - 30,000 THB',
+        list: [
+            {
+                title: 'รายละเอียดงาน',
+                content: [
+                    '- ตรวจสอบและวิเคราะห์คุณสมบัติของลูกค้าตามเกณฑ์ที่กำหนด ก่อนอนุมัติสินเชื่อ',
+                    '- ประเมินเอกสารและข้อมูลทางการเงิน เช่น บัตรประจำตัวประชาชน เอกสารการเงิน และประวัติการกู้ยืม',
+                    '- ตัดสินใจอนุมัติหรือปฏิเสธคำขอเช่าตามนโยบายความเสี่ยงของบริษัท',
+                    '- ตรวจสอบความถูกต้องของสัญญาเช่าและกระบวนการอนุมัติ เพื่อให้แน่ใจว่าสอดคล้องกับมาตรฐานและข้อกำหนดของบริษัท',
+                    '- รายงานความเสี่ยงและแนวโน้มที่อาจเกิดขึ้น พร้อมทั้งเสนอวิธีป้องกันหรือปรับปรุงกระบวนการ'
+                ]
+            },
+            {
+                title: 'คุณสมบัติ',
+                content: [
+                    '1. ปริญญาตรีขึ้นไป สาขาการเงิน เศรษฐศาสตร์ การจัดการความเสี่ยง สถิติศาสตร์ หรือสาขาอื่นที่เกี่ยวข้องจะพิจารณาเป็นพิเศษ',
+                    '2. มีประสบการณ์ทำงานด้านการตรวจสอบความเสี่ยง การประเมินเครดิต หรืออุตสาหกรรมการเงินอย่างน้อย 1 ปี ผู้ที่มีประสบการณ์ในอุตสาหกรรมเช่า สินเชื่อขนาดเล็ก หรือธนาคารจะได้รับการพิจารณาเป็นพิเศษ',
+                    '3. เข้าใจกระบวนการจัดการความเสี่ยงและแบบจำลองการประเมินเครดิต รวมถึงกฎหมายที่เกี่ยวข้อง',
+                    '4. มีความสามารถในการวิเคราะห์ข้อมูลและความไวต่อความเสี่ยง สามารถประเมินความเสี่ยงได้ด้วยตัวเองได้เป็นอย่างดี',
+                    '5. มีความชำนาญในการใช้โปรแกรมสำนักงาน และมีประสบการณ์ในการใช้งานระบบจัดการความเสี่ยงจะได้รับการพิจารณาเป็นพิเศษ'
+                ]
+            },
+            {
+                title: 'วิธีการสมัคร',
+                content: [
+                    'กรุณาส่งเรซูเม่ของคุณมาที่อีเมลล โดยระบุหัวข้ออีเมลเป็น “ชื่อตำแหน่งงาน + ชื่อของคุณ” หรือสามารถติดต่อเราผ่านทางโทรศัพท์หรือ Line เพื่อขอข้อมูลเพิ่มเติม'
+                ]
+            }
+        ]
+    },
+		// 岗位2：เจ้าหน้าที่เร่งรัดหนี้สินทางโทรศัพท์（新增岗位，需在JobList中添加对应项才会显示）
+		{
+		    id: 2,
+		    title: "เจ้าหน้าที่เร่งรัดหนี้สินทางโทรศัพท์",
+				salary:'12,000 - 15,000 + ค่าคอมมิชชั่น',
+		    list: [
+		        {
+		            title: 'รายละเอียดงาน',
+		            content: [
+		                '- ติดต่อลูกค้าทางโทรศัพท์',
+		                '- แจ้งยอดค้างชำระให้ลูกค้าทราบ',
+		                '- เจรจาประนอมหนี้กับลูกค้า'
+		            ]
+		        },
+		        {
+		            title: 'คุณสมบัติ',
+		            content: [
+		                '1. เพศชาย / หญิง อายุ 20 - 45 ปี',
+		                '2. วุฒิการศึกษาระดับ ม.6 หรือ ปวช. ขึ้นไป',
+		                '3. หากมีประสบการณ์ติดตามสินเชื่อค้างชำระหรือให้บริการลูกค้าทางโทรศัพท์จะพิจารณาเป็นพิเศษ',
+		                '4. มีทักษะในการเจรจาต่อรองและแก้ไขปัญหาเฉพาะหน้าได้',
+		                '5. ยินดีรับนักศึกษาจบใหม่ และผู้พิการ',
+		                '6. สามารถใช้คอมพิวเตอร์เบื้องต้นได้'
+		            ]
+		        },
+		        {
+		            title: 'วิธีการสมัคร',
+		            content: [
+		                'กรุณาส่งเรซูเม่ของคุณมาที่อีเมลล โดยระบุหัวข้ออีเมลเป็น “ชื่อตำแหน่งงาน + ชื่อของคุณ” หรือสามารถติดต่อเราผ่านทางโทรศัพท์หรือ Line เพื่อขอข้อมูลเพิ่มเติม'
+		            ]
+		        }
+		    ]
+		},
+    // 岗位3：Content Creator & VDO Editor（对应JobList的id=2）
+    {
+        id: 3,
+        title: "Content Creator & VDO Editor",
+				salary:'15,000 - 40,000 THB',
+        list: [
+            {
+                title: 'รายละเอียดงาน',
+                content: [
+                    '- วางแผน คิดไอเดีย และสร้างสรรค์คอนเทนต์สำหรับสื่อออนไลน์ เช่น Facebook, TikTok',
+                    '- เขียนบทหรือบทความ SEO คำโปรย แคปชั่น หรือเนื้อหาอื่น ๆ สำหรับคลิปวิดีโอ/คอนเทนท์ โพสต์ลงบนโซเชียล ให้มีความน่าสนใจและดึงดูดกลุ่มเป้าหมาย',
+                    '- ตัดต่อวิดีโอ (Short Video / Long Form) เพื่อใช้โปรโมทสินค้าและกิจกรรมของบริษัท ลง Social Media ได้อย่างมืออาชีพ',
+                    '- ใส่เอฟเฟกต์ เพลง ซับไตเติล และองค์ประกอบอื่น ๆ เพื่อเพิ่มคุณภาพของวิดีโอ',
+                    '- เกาะติดเทรนด์ใหม่ ๆ และนำมาปรับใช้กับการสร้างคอนเทนต์ให้เหมาะสมกับแบรนด์',
+                    '- ประสานงานร่วมกับทีมการตลาดและทีมกราฟิก เพื่อให้ได้ผลงานตรงตามกลยุทธ์ของบริษัท',
+                    '- วิเคราะห์ผลลัพธ์ของคอนเทนต์ และปรับปรุงเพื่อให้สอดคล้องกับเป้าหมายทางการตลาด',
+                    '- งานอื่น ๆ ตามที่ได้รับมอบหมาย'
+                ]
+            },
+            {
+                title: 'คุณสมบัติ',
+                content: [
+                    '1. ไม่จำกัดเพศ อายุ',
+                    '2. จบการศึกษาระดับปริญญาตรี',
+                    '3. มีทักษะด้านการเขียนคอนเทนต์และการเล่าเรื่อง',
+                    '4. สามารถใช้โปรแกรมตัดต่อวิดีโอ เช่น Adobe Premiere Pro, Final Cut Pro, After Effects หรือ CapCut ได้ดี',
+                    '5. มีความคิดสร้างสรรค์ กล้าเสนอไอเดียใหม่ ๆ และพร้อมทดลองรูปแบบคอนเทนต์ที่แตกต่าง',
+                    '6. หากมีประสบการณ์การผลิต Short Video / TikTok / YouTube หรือการถ่ายทำภาพและวีดีโอ จะพิจารณาเป็นพิเศษ',
+                    '7. เขียนแคปชันและเนื้อหาได้น่าสนใจ',
+                    '8. มีความรับผิดชอบสูง ทำงานร่วมกับทีมได้ดี และสามารถทำงานภายใต้กำหนดเวลาได้'
+                ]
+            },
+            {
+                title: 'วิธีการสมัคร',
+                content: [
+                    'กรุณาส่งเรซูเม่ของคุณมาที่อีเมลล โดยระบุหัวข้ออีเมลเป็น “ชื่อตำแหน่งงาน + ชื่อของคุณ” หรือสามารถติดต่อเราผ่านทางโทรศัพท์หรือ Line เพื่อขอข้อมูลเพิ่มเติม'
+                ]
+            }
+        ]
+    },
+    // 岗位4：งานโปรโมทแพลตฟอร์ม（对应JobList的id=3）
+    {
+        id: 4,
+        title: "งานโปรโมทแพลตฟอร์ม",
+				salary:'500 - 800 THB (Daily)',
+        list: [
+            {
+                title: 'รายละเอียดงาน',
+                content: [
+                    'งานโปรโมทแพลตฟอร์มให้เช่ามือถือ รายได้ดี  บริษัทของเรากำลังขยายบริการ แพลตฟอร์มให้เช่ามือถือแบบรายเดือน ต้องการทีมงานช่วยโปรโมทนอกสถานที่ กระตุ้นยอดลงทะเบียน และสร้างการรับรู้ในกลุ่มเป้าหมาย พื้นที่: [ตามห้างสรรพสินค้า ตู้ขายโทรศัพท์ ตลาดห้วยขวาง หรือศูนย์ขายมือถือภายในเขตพื้นที่กทม เช่น MBK ,Fortune town , China town เป็นต้น ลักษณะงาน: - แจกใบปลิว / พูดคุยแนะนำแพลตฟอร์ม - ให้ข้อมูลลูกค้าเกี่ยวกับบริการเช่ามือถือ',
+                    '- ช่วยแนะนำให้ลูกค้าสแกน QR Code, สมัครสมาชิก, ดาวน์โหลดแอป หรือกรอกแบบสอบถาม',
+                    '- เสนอ QR Code เฉพาะของแพลตฟอร์มให้กับร้านขายมือถือ: เมื่อลูกค้าสั่งเช่าผ่าน QR Code นี้ พนักงานส่งเสริมการขายจะได้รับค่าคอมมิชชั่น',
+                    '- ประสานงานเบื้องต้นกับทีมหลังบ้าน',
+                    '- มีเทรนนิ่งเนื้องานให้ก่อนลงพื้นที่จริง'
+                ]
+            },
+            {
+                title: 'คุณสมบัติ',
+                content: [
+                    '1. เพศชาย/หญิง LGBTQ อายุ 18 ปีขึ้นไป',
+                    '2. บุคลิกภาพดี พูดจาชัดเจน มีใจรักการบริการ',
+                    '3. ขยัน อดทน ทำงานเป็นทีมได้เป็นอย่างดี',
+                    '4. มีประสบการณ์งานลักษณะนี้จะได้รับการพิจารณาเป็นพิเศษ'
+                ]
+            },
+            {
+                title: 'วิธีการสมัคร',
+                content: [
+                    'กรุณาส่งเรซูเม่ของคุณมาที่อีเมลล โดยระบุหัวข้ออีเมลเป็น “ชื่อตำแหน่งงาน + ชื่อของคุณ” หรือสามารถติดต่อเราผ่านทางโทรศัพท์หรือ Line เพื่อขอข้อมูลเพิ่มเติม'
+                ]
+            }
+        ]
+    },
+    // 岗位5：ล่ามจีน（新增岗位，需在JobList中添加对应项才会显示）
+    {
+        id: 5,
+        title: "ล่ามจีน",
+				salary:'15,000 - 40,000 บาท',
+        list: [
+            {
+                title: 'คุณสมบัติผู้สมัคร',
+                content: [
+                    '1. ภาษาจีน สาขาวิชาการเงิน เศรษฐศาสตร์ หรือสาขาที่เกี่ยวข้อง',
+                    '2. สามารถอ่านและเขียนภาษาจีนได้ โดยจะพิจารณาเป็นพิเศษสำหรับผู้ที่เคยศึกษาในประเทศจีน',
+                    '3. มีความชำนาญในการใช้โปรแกรม Word, Excel และซอฟต์แวร์ออฟฟิศอื่นๆ',
+                    '4. สนใจเรียนรู้ มีแผนฝึกอบรมอย่างละเอียดหลังจากเข้าร่วมงานกับบริษัท',
+                    '5. ผู้สมัครที่มีประสบการณ์การทำงานในอุตสาหกรรมการธนาคารหรือการเช่าซื้อจะได้รับการพิจารณาเป็นพิเศษ'
+                ]
+            },
+            {
+                title: 'วิธีการสมัคร',
+                content: [
+                    'กรุณาส่งเรซูเม่ของคุณมาที่อีเมลล โดยระบุหัวข้ออีเมลเป็น “ชื่อตำแหน่งงาน + ชื่อของคุณ” หรือสามารถติดต่อเราผ่านทางโทรศัพท์หรือ Line เพื่อขอข้อมูลเพิ่มเติม'
+                ]
+            }
+        ]
+    },
+    // 岗位6：Senior Online Marketing（新增岗位，需在JobList中添加对应项才会显示）
+    {
+        id: 6,
+        title: "Senior Online Marketing",
+				salary:'40,000 - 60,000 บาท',
+        list: [
+            {
+                title: 'รายละเอียดงาน',
+                content: [
+                    '1. วางกลยุทธ์การตลาดออนไลน์ (Online Marketing Strategy)',
+                    '2. วางแผนการตลาดออนไลน์ทั้งระยะสั้นและระยะยาว',
+                    '3. กำหนดเป้าหมาย (KPIs) และกลยุทธ์ให้สอดคล้องกับเป้าหมายขององค์กร',
+                    '4. บริหารจัดการช่องทางการตลาดดิจิทัล:',
+                    '5. ดูแลการทำการตลาดบน Facebook, Instagram, Google Ads, YouTube, TikTok, LINE OA ฯลฯ ',
+                    '6. วิเคราะห์ประสิทธิภาพของแต่ละช่องทาง และปรับปรุงให้เกิดผลลัพธ์สูงสุด (ROI) บริหารงบประมาณโฆษณา ',
+                    '7. วางแผนและควบคุมงบประมาณให้เกิดประสิทธิภาพสูงสุด',
+                    '8. รายงานการใช้จ่ายและผลตอบแทนอย่างสม่ำเสมอวิเคราะห์ข้อมูลและทำรายงาน (Analytics)',
+                    '9. ใช้เครื่องมือเช่น Google Analytics, Meta Ads Manager, SEMrush เป็นต้น ',
+                    '10. สรุปผลแคมเปญ พร้อมเสนอแผนพัฒนาหรือปรับกลยุทธ์ดูแล Content & Campaign ',
+                    '11. วางแผนและตรวจสอบคุณภาพของเนื้อหาทั้งข้อความ รูปภาพ และวิดีโอ ',
+                    '12. ทำงานร่วมกับทีมครีเอทีฟและคอนเทนต์ให้ตอบโจทย์กลุ่มเป้าหมายทีมเวิร์กและการบริหารทีม ',
+                    '13. ทำงานร่วมกับทีมการตลาดและฝ่ายอื่น ๆ เช่น Sales, Creative, IT ',
+                    '14. อาจต้องดูแลหรือโค้ชทีม Online Marketing Junior หรือ Interns 15.มีพื้นฐานในการตัดต่อ'
+                ]
+            },
+            {
+                title: 'คุณสมบัติผู้สมัคร',
+                content: [
+                    '1. ประสบการณ์ด้านการตลาดออนไลน์อย่างน้อย 3-5 ปี',
+                    '2. เข้าใจ SEO/SEM, Google Ads, Meta Ads, Retargeting, Conversion Optimization',
+                    '3. มีความสามารถด้านการวิเคราะห์ข้อมูล และใช้เครื่องมือการตลาดดิจิทัล',
+                    '4. มีความคิดสร้างสรรค์ มีทักษะการสื่อสาร และสามารถบริหารจัดการโปรเจกต์ได้ดี',
+                    '5. หากเคยมีประสบการณ์ในสาย E-commerce หรือ B2C จะพิจารณาเป็นพิเศษ'
+                ]
+            },
+            {
+                title: 'วิธีการสมัคร',
+                content: [
+                    'กรุณาส่งเรซูเม่ของคุณมาที่อีเมลล โดยระบุหัวข้ออีเมลเป็น “ชื่อตำแหน่งงาน + ชื่อของคุณ” หรือสามารถติดต่อเราผ่านทางโทรศัพท์หรือ Line เพื่อขอข้อมูลเพิ่มเติม'
+                ]
+            }
+        ]
+    }
+];
+
+// 统一联系方式数据
+export const userInfo = [
+    { label: 'ที่อยู่:', content: '135/21 อาคารอามรพันธุ์ 205 ทาวเวอร์ 2 ชั้น 9 ซอยนาทอง ถนนรัชดาภิเษก แขวงดินแดง เขตดินแดง กรุงเทพ 10400 สาขา 00001' },
+    { label: 'Tel:', content: '0888000282' },
+    { label: 'Line:', content: '@octop' },
+    { label: 'E-mail:', content: 'Job@octoprental.com' }
+];
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 7615c92..8b24825 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -33,13 +33,14 @@ const router = createRouter({
 			component: SinglePage,
 			children: [
 				{
-					path: '/job/joblist',
+					path: '/joblist',
 					component: JobList,
 					meta: {
 						h5: true
 					}
 				}, {
-					path: '/jobdetail',
+					path: '/jobdetail/:id',
+					name: 'JobDetail',
 					component: JobDetail,
 					meta: {
 						h5: true
diff --git a/src/static/font/Prompt-Regular.ttf b/src/static/font/Prompt-Regular.ttf
new file mode 100644
index 0000000..f000d23
Binary files /dev/null and b/src/static/font/Prompt-Regular.ttf differ