From f405f680457644c166a2e8fdd0ce972ecb77382d Mon Sep 17 00:00:00 2001
From: liuhanhua <zuozhea@163.com>
Date: Sat, 27 Sep 2025 11:12:58 +0800
Subject: [PATCH] =?UTF-8?q?develop:=E5=BC=80=E5=8F=91=E6=8B=9B=E8=81=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavContainer.vue | 106 ++++++++++-----------
 src/pages/H5/Join/JobDetail.vue | 161 +++++++++++++++++++++++++++++++-
 src/pages/H5/Join/JobList.vue   | 137 +++++++++++++++------------
 3 files changed, 287 insertions(+), 117 deletions(-)

diff --git a/src/components/NavContainer.vue b/src/components/NavContainer.vue
index c66d7c7..a1adc5d 100644
--- a/src/components/NavContainer.vue
+++ b/src/components/NavContainer.vue
@@ -2,9 +2,9 @@
 	<div class="navCont" v-if="isMenuVisible">
 		<el-row class="flex-display flex-space-between">
 			<el-col :span="10">
-				<div class="flex-display">
-					<div style="height: 3.75rem;">
-						<img class="logo" src="@/static/logotitle.png" />
+				<div class="flex-display">
+					<div style="height: 3.75rem;">
+						<img class="logo" src="@/static/logotitle.png" />
 					</div>
 					<!-- <span class="f-24 bold">{{$t("logoTitle")}}</span> -->
 					<span class="f-12 fonsColor">{{$t("home.title.txt")}}</span>
@@ -12,8 +12,8 @@
 			</el-col>
 			<el-col :span="14">
 				<div class="flex-display flex-space-around">
-					<div class="f-12" v-for="item in navList" :key="item.name">
-						<span v-if="item.name == 'contact'" @click="itemClick()" class="nav-font">{{
+					<div class="f-12" v-for="item in navList" :key="item.name">
+						<span v-if="item.name == 'contact'" @click="itemClick()" class="nav-font">{{
 						  $t("home."+item.name) }}</span>
 						<router-link v-else :to="item.type" class="nav-font">{{$t("home."+item.name) }}</router-link>
 					</div>
@@ -43,8 +43,8 @@
 		<el-row class="flex-display flex-space-between">
 			<el-col :span="23">
 				<div class="flex-display">
-					<div style="height: 3.75rem;">
-						<img class="logo" src="@/static/logotitle.png" />
+					<div style="height: 3.75rem;">
+						<img class="logo" src="@/static/logotitle.png" />
 					</div>
 					<!-- <span class="f-24 bold">{{$t("logoTitle")}}</span> -->
 					<span class="f-12 fonsColor">{{$t("home.title.txt")}}</span>
@@ -57,40 +57,40 @@
 			</el-col>
 		</el-row>
 	</div>
-	<el-drawer v-model="drawer" :show-close="false" :with-header="false">
+	<el-drawer v-model="drawer" :show-close="false" :with-header="false">
 		<div style="margin-bottom: 0.625rem;" class="f-20 bold">{{$t("home.navigation")}}</div>
-		<div style="margin-bottom: 0.625rem;" class="f-14" v-for="item in navList" :key="item.name">
-			<router-link :to="item.type" class="nav-font">{{$t("home."+item.name) }}</router-link>
-		</div>
-		<div style="margin-bottom: 0.625rem;" class="f-20 bold">{{$t("home.language.switching")}}</div>
-		<el-dropdown @command="changeLanguage">
-			<span class="el-dropdown-link f-14">
-				{{$t("Language")}}
-				<el-icon class="el-icon--right">
-					<ArrowDown />
-				</el-icon>
-			</span>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item :command="item.value" v-for="(item, index) in languagesList" :key="index">
-						<div class="flex-display f-12">
-							<img class="imgClass" :src="item.icon" />
-							<span>{{ item.name }}</span>
-						</div>
-					</el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
+		<div style="margin-bottom: 0.625rem;" class="f-14" v-for="item in navList" :key="item.name">
+			<router-link :to="item.type" class="nav-font">{{$t("home."+item.name) }}</router-link>
+		</div>
+		<div style="margin-bottom: 0.625rem;" class="f-20 bold">{{$t("home.language.switching")}}</div>
+		<el-dropdown @command="changeLanguage">
+			<span class="el-dropdown-link f-14">
+				{{$t("Language")}}
+				<el-icon class="el-icon--right">
+					<ArrowDown />
+				</el-icon>
+			</span>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item :command="item.value" v-for="(item, index) in languagesList" :key="index">
+						<div class="flex-display f-12">
+							<img class="imgClass" :src="item.icon" />
+							<span>{{ item.name }}</span>
+						</div>
+					</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
 		</el-dropdown>
-	</el-drawer>
-	
-	<el-dialog width="500px" v-model="dialogVisible">
-		<div class="flex-display flex-column" style="color: black;padding-bottom: 50px;">
-			<div class="f-30" style="font-weight: 600;padding: 20px 0 0;">{{$t("octopContact")}}</div>
-			<div>
-				<img style="width: 250px;height: 250px;" src="../assets/images/line.png" alt="" />
-			</div>
-			<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
-		</div>
+	</el-drawer>
+	
+	<el-dialog width="500px" v-model="dialogVisible">
+		<div class="flex-display flex-column" style="color: black;padding-bottom: 50px;">
+			<div class="f-30" style="font-weight: 600;padding: 20px 0 0;">{{$t("octopContact")}}</div>
+			<div>
+				<img style="width: 250px;height: 250px;" src="../assets/images/line.png" alt="" />
+			</div>
+			<div class="f-20" style="font-weight: 600;">{{$t("octopContact.subtitle")}}</div>
+		</div>
 	</el-dialog>
 </template>
 
@@ -106,10 +106,10 @@
 		if (window.innerWidth < 768) { //当屏幕宽度小于768px时
 			isMenuVisible.value = false
 		} else {
-			isMenuVisible.value = true
+			isMenuVisible.value = true
 			drawer.value = false
 		}
-	}
+	}
 	// 国际化语言
 	const navList = ref([
 		{
@@ -123,10 +123,10 @@
 		{
 			name: "contact",
 			type: '/'
-		},
-		{
-			name: "recruitment",
-			type: '/joblist'
+		},
+		{
+			name: "recruitment",
+			type: '/joblist'
 		},
 		{
 			name: "problem",
@@ -154,17 +154,17 @@
 	])
 
 	const changeLanguage = (command : string) => {
-		locale.value = command
-		// 赋予浏览器标识语言种类，其实并无卵用
-		document.documentElement.lang = command
+		locale.value = command
+		// 赋予浏览器标识语言种类，其实并无卵用
+		document.documentElement.lang = command
 		localStorage.setItem('lang', command)// 缓存语言
 	}
 	// meun菜单
-	const drawer = ref(false)
+	const drawer = ref(false)
 	
 	const dialogVisible = ref(false)
-	const itemClick = () => {
-		dialogVisible.value = true
+	const itemClick = () => {
+		dialogVisible.value = true
 	}
 
 	onMounted(() => {
@@ -215,11 +215,11 @@
 		align-items: center;
 	}
 
-	.logo {
+	.logo {
 		height: 100%;
 		// width: 2.1875rem;
 		// height: 2.1875rem;
-		margin-right: 0.375rem;
+		margin-right: 0.375rem;
 		border-radius: 0.5rem;
 	}
 
diff --git a/src/pages/H5/Join/JobDetail.vue b/src/pages/H5/Join/JobDetail.vue
index e4bca35..e8c0d62 100644
--- a/src/pages/H5/Join/JobDetail.vue
+++ b/src/pages/H5/Join/JobDetail.vue
@@ -1,11 +1,162 @@
 <template>
-    <div>2222</div>
+    <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';
-        
-</script>
-<style scoped lang="scss">
+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);
+                    }
+                }
+            }
+
+
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/H5/Join/JobList.vue b/src/pages/H5/Join/JobList.vue
index e7ce644..588960d 100644
--- a/src/pages/H5/Join/JobList.vue
+++ b/src/pages/H5/Join/JobList.vue
@@ -1,8 +1,9 @@
 <template>
-    <div class="content">
-			<div class="listCont">
-				<img class="cardimg" src="../../../assets/images/job_back.png" alt="暂无图片" />
-				<div class="listCard">
+	<div class="content">
+		<div class="listCont">
+			<img class="cardimg" src="../../../assets/images/job_back.png" alt="暂无图片" />
+			<div class="listCard">
+				<router-link to="/jobdetail" class="nav-font">
 					<div class="listitem">
 						<div class="title">เจ้าหน้าที่ตรวจสอบสินเชื่อ</div>
 						<div class="salary">15,000 - 30,000 THB</div>
@@ -11,73 +12,91 @@
 							<div class="gojob_but">คลิกดูด่วน</div>
 						</div>
 					</div>
-				</div>
-				<!-- <img src="url('../../../assets/images/job_back.png')" alt="" /> -->
+				</router-link>
+
 			</div>
+			<!-- <img src="url('../../../assets/images/job_back.png')" alt="" /> -->
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup name="join">
-  import { ref } from 'vue';
+// import { ref } from 'vue';
+// const jumpToDetail = () => {
+// 	console.log(1111);
+
+// }
+
 
 </script>
 <style scoped lang="scss">
-  .content{
+.content {
+	width: 100%;
+	margin: 50px 0 0;
+	min-height: 80vh;
+	max-width: 750px;
+	margin: 0 auto;
+
+	.listCont {
+
+		// width: 750px;
 		width: 100%;
-		margin: 50px 0 0;
-		.listCont{
-			margin: 0 auto;
-			width: 750px;
-			
-			.listCard{
+
+		.listCard {
+			width: 100%;
+			padding: 0 10px;
+			position: relative;
+			top: -75px;
+
+			.listitem {
+				background: #ffffff;
 				width: 100%;
-				padding:0 20px;
-				position: relative;
-				top: -150px;
-				
-				.listitem{
-					background: #ffffff;
-					width: 100%;
-					height: 228px;
-					border-radius: 20px;
-					padding: 28px 40px;
-					.title{
-						font-family: Prompt, Prompt;
-						font-weight: bold;
-						font-size: 32px;
-						color: #333333;
-					}
-					.salary{
-						font-family: Prompt, Prompt;
-						font-weight: 600;
-						font-size: 28px;
-						color: #F32D2D;
-						margin-top: 6px;
-					}
-					.gojob{
-						display: flex;
-						justify-content: space-between;
-						align-items: center;
-						margin-top: 30px;
-						.gojob_logo{
-							width: 144px;
-							height: 41px;
-						}
-						.gojob_but{
-							width: 158px;
-							height: 52px;
-							background: rgba(38,127,250,0.15);
-							border-radius: 8px;
-							font-family: Prompt, Prompt;
-							font-size: 28px;
-							color: #267FFA;
-							line-height: 52px;
-							text-align: center;
-						}
-					}
-					
+				height: 114px;
+				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;
+				}
+
+				.gojob {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-top: 15px;
+					cursor: pointer;
+
+					.gojob_logo {
+						width: 72px;
+						height: 20px;
+					}
+
+					.gojob_but {
+						width: 79px;
+						height: 26px;
+						background: rgba(38, 127, 250, 0.15);
+						border-radius: 4px;
+						font-family: Prompt, Prompt;
+						font-size: 14px;
+						color: #267FFA;
+						line-height: 26px;
+						text-align: center;
+					}
+				}
+
 			}
 		}
 	}
+}
 </style>
\ No newline at end of file