develop:开发招聘

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';
+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">
 
+<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>

src/pages/H5/Join/JobList.vue

@@ -3,6 +3,7 @@
 		<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,6 +12,8 @@
 							<div class="gojob_but">คลิกดูด่วน</div>
 						</div>
 					</div>
+				</router-link>
+
 			</div>
 			<!-- <img src="url('../../../assets/images/job_back.png')" alt="" /> -->
 		</div>
@@ -18,60 +21,76 @@
 </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 {
 	width: 100%;
 	margin: 50px 0 0;
-		.listCont{
+	min-height: 80vh;
+	max-width: 750px;
 	margin: 0 auto;
-			width: 750px;
+
+	.listCont {
+
+		// width: 750px;
+		width: 100%;
 
 		.listCard {
 			width: 100%;
-				padding:0 20px;
+			padding: 0 10px;
 			position: relative;
-				top: -150px;
+			top: -75px;
 
 			.listitem {
 				background: #ffffff;
 				width: 100%;
-					height: 228px;
+				height: 114px;
-					border-radius: 20px;
+				border-radius: 10px;
-					padding: 28px 40px;
+				padding: 14px 20px;
+
 				.title {
 					font-family: Prompt, Prompt;
 					font-weight: bold;
-						font-size: 32px;
+					font-size: 16px;
 					color: #333333;
 				}
+
 				.salary {
 					font-family: Prompt, Prompt;
 					font-weight: 600;
-						font-size: 28px;
+					font-size: 14px;
 					color: #F32D2D;
-						margin-top: 6px;
+					margin-top: 3px;
 				}
+
 				.gojob {
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
-						margin-top: 30px;
+					margin-top: 15px;
+					cursor: pointer;
+
 					.gojob_logo {
-							width: 144px;
+						width: 72px;
-							height: 41px;
+						height: 20px;
 					}
+
 					.gojob_but {
-							width: 158px;
+						width: 79px;
-							height: 52px;
+						height: 26px;
 						background: rgba(38, 127, 250, 0.15);
-							border-radius: 8px;
+						border-radius: 4px;
 						font-family: Prompt, Prompt;
-							font-size: 28px;
+						font-size: 14px;
 						color: #267FFA;
-							line-height: 52px;
+						line-height: 26px;
 						text-align: center;
 					}
 				}