完善

src/components/FirstJob/detail.vue

@@ -161,13 +161,23 @@
 				</div>
 
 				<div class="jobinformationbox" style="padding-left: 20px; padding-top: 4px">
-					<h1>
+					<h1 v-if="false">
 						<div class="infotitle">
 							<span @click="tabchange = 1" :class="tabchange === 1 ? 'active' : ''">基本信息</span>
 							<span @click="tabchange = 0" :class="tabchange === 0 ? 'active' : ''" v-if="false">财务结算</span>
 							<span @click="tabchange = 2" :class="tabchange === 2 ? 'active' : ''">职位描述</span>
 						</div>
 					</h1>
+					<div class="g_flex_row_between" style="border-bottom: 1px solid rgb(237, 237, 237);">
+						<div v-for="(item,index) in tabList" :key="index" 
+								 class="tab-item"
+								 :class="tabActive == (index + 1) ? 'tab-item-active' : ''"
+								 @click="updateTab(item,index)"
+						>
+							{{ item.title }}
+							<div class="bor"></div>
+						</div>
+					</div>
 					<div class="pay" id="tip" v-show="tabchange === 1">
 						<div class="mb12 mt20 titlestyle">温馨提示</div>
 						<div class="showInfo" style="width: unset; color: #ff4400 !important">{{ jobDetail.notes || "-" }}</div>
@@ -487,6 +497,22 @@ export default {
 	// 组件状态值
 	data() {
 		return {
+			tabActive:1,
+			tabList:[
+				{
+					title: "基本信息",
+					key: 1,
+				},
+				// {
+				// 	title: "财务结算",
+				// 	key: 0,
+				// },
+				{
+					title: "职位描述",
+					key: 2,
+				},
+				// }
+			],
 			isSee: true,
 			agency: {},
 			onSiteUsersInfo: "",
@@ -1083,6 +1109,10 @@ export default {
 				onOk() {},
 			});
 		},
+
+		updateTab($item,$inedx){
+			this.tabActive = $item.key;
+		}
 	},
 };
 </script>
@@ -1202,6 +1232,7 @@ export default {
 		margin-bottom: 20px;
 		.subset {
 			padding: 20px;
+			padding-bottom: 12px;
 			// margin-bottom: 16px;
 			// width: 914px;
 			background-color: #fff;
@@ -2041,4 +2072,28 @@ export default {
 	font-size: 44px;
 	line-height: 1.3;
 }
+.tab-item{
+	width: 50%;
+	text-align: center;
+	font-size: 16px;
+	padding-bottom: 12px;
+	cursor: pointer;
+	position: relative;
+	.bor{
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 0;
+		width: 20px;
+		height: 2px;
+		background-color: transparent;
+	}
+}
+.tab-item-active{
+	color: #1890ff;
+	font-weight: 600;
+	.bor{
+		background-color: #1890ff;
+	}
+}
 </style>