开通会员表格样式优化

src/components/header/header.vue

@@ -6,8 +6,8 @@
 			</div>
 			<div class="headers-box-right flex align-center">
 				<Notice v-if="gongao.length>0" :lists="gongao" />
-				<el-popover ref="popoverRef" trigger="click" :show-arrow="false" :popper-style="popperStyle"
-					placement="bottom" :width="340">
+				<el-popover trigger="click" :show-arrow="false" :teleported="false" :popper-style="popperStyle"
+					placement="bottom" :width="370">
 					<template #reference>
 						<!-- <div class="flex align-center myVip" v-if="userType==1">
 							<el-image style="width: 22px; height: 22px;margin-right: 10px;"
@@ -151,18 +151,17 @@
 							</div>
 						</div> -->
 						<div class="myVipCon-li" v-if="userType == 2">
-							<div class="myVipCon-li-sj"></div>
-							<div class="myVipCon-li-con">
+							<!-- <div class="myVipCon-li-sj"></div> -->
+							<div class="myVipCon-li-con" style="padding:0">
 								<!-- 顶部标题行 -->
-								<div class="myVipCon-li-con-item flex align-center justify-between">
-									<div class="myVipCon-li-con-items" style="font-weight: 500;">权益类型</div>
-									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1"
-										style="font-weight: 500;">基础权益</div>
+								<div class="myVipCon-li-con-item flex align-center justify-between table-header border-top-radius">
+									<div class="myVipCon-li-con-items header-cell border-right">权益类型</div>
+									<div class="myVipCon-li-con-items header-cell border-right">基础权益</div>
 
-									<div v-for="(vip, index) in viplist" :key="index"
-										class="myVipCon-li-con-items myVipCon-li-con-itemscolor2"
-										style="font-weight: 500;">
+									<div v-for="(vip, index) in viplist" :key="index" 
+										:class="['myVipCon-li-con-items', 'myVipCon-li-con-itemscolor2', 'border-right', { 'first-active': index === 0 },{'two-active': index === 1},{'last-active': index === 2}]">
 										<div v-if="vip.vipName === vipName" class="plan-tag-left">生效中</div>
+										<view v-if="vip.vipName === '年度版'" class="plan-tag-right">推荐</view>
 										<div>{{ vip.vipName }}</div>
 										<div v-if="vip.vipName === vipName" style="font-size: 8px;">{{ endTimeStr ?
 											endTimeStr.split(' ')[0] : '' }}到期</div>
@@ -170,51 +169,51 @@
 								</div>
 
 								<!-- 在线普通职位 -->
-								<div class="myVipCon-li-con-item flex align-center justify-between">
-									<div class="myVipCon-li-con-items" style="font-weight: 500;">在线普通职位</div>
-									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1">{{ nonVipInfo.postTimes }}个</div>
+								<div class="myVipCon-li-con-item flex align-center justify-between table-body">
+									<div class="myVipCon-li-con-items border-right">在线普通职位</div>
+									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1 border-right">{{ nonVipInfo.postTimes }}个</div>
 									<div v-for="(vip, index) in viplist" :key="index"
-										class="myVipCon-li-con-items myVipCon-li-con-itemscolor2">
+										:class="['myVipCon-li-con-items', 'myVipCon-li-con-itemscolor2', 'border-right', { 'body-first-active': index === 0 }, { 'body-two-active': index === 1 }, { 'body-last-active': index === 2 }]">
 										{{ vip.vipPostTimes }}个
 									</div>
 								</div>
 
 								<!-- 在线急聘职位 -->
-								<div class="myVipCon-li-con-item flex align-center justify-between">
-									<div class="myVipCon-li-con-items" style="font-weight: 500;">在线急聘职位</div>
-									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1">{{ nonVipInfo.dueTimes }}个</div>
+								<div class="myVipCon-li-con-item flex align-center justify-between table-body">
+									<div class="myVipCon-li-con-items border-right">在线急聘职位</div>
+									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1 border-right">{{ nonVipInfo.dueTimes }}个</div>
 									<div v-for="(vip, index) in viplist" :key="index"
-										class="myVipCon-li-con-items myVipCon-li-con-itemscolor2">
+										:class="['myVipCon-li-con-items', 'myVipCon-li-con-itemscolor2', 'border-right', { 'body-first-active': index === 0 }, { 'body-two-active': index === 1 }, { 'body-last-active': index === 2 }]">
 										{{ vip.vipDueTimes }}个
 									</div>
 								</div>
 
 								<!-- 每日查看总数 -->
-								<div class="myVipCon-li-con-item flex align-center justify-between">
-									<div class="myVipCon-li-con-items" style="font-weight: 500;">每日查看总数</div>
-									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1">{{ nonVipInfo.viewTimes }}个</div>
+								<div class="myVipCon-li-con-item flex align-center justify-between table-body">
+									<div class="myVipCon-li-con-items border-right">每日查看总数</div>
+									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1 border-right">{{ nonVipInfo.viewTimes }}个</div>
 									<div v-for="(vip, index) in viplist" :key="index"
-										class="myVipCon-li-con-items myVipCon-li-con-itemscolor2">
+										:class="['myVipCon-li-con-items', 'myVipCon-li-con-itemscolor2', 'border-right', { 'body-first-active': index === 0 }, { 'body-two-active': index === 1 }, { 'body-last-active': index === 2 }]">
 										{{ vip.vipViewTimes }}个
 									</div>
 								</div>
 
 								<!-- 每日沟通总数 -->
-								<div class="myVipCon-li-con-item flex align-center justify-between">
-									<div class="myVipCon-li-con-items" style="font-weight: 500;">每日沟通总数</div>
-									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1">{{ nonVipInfo.conTimes }}个</div>
+								<div class="myVipCon-li-con-item flex align-center justify-between table-body">
+									<div class="myVipCon-li-con-items border-right">每日沟通总数</div>
+									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1 border-right">{{ nonVipInfo.conTimes }}个</div>
 									<div v-for="(vip, index) in viplist" :key="index"
-										class="myVipCon-li-con-items myVipCon-li-con-itemscolor2">
+										:class="['myVipCon-li-con-items', 'myVipCon-li-con-itemscolor2', 'border-right', { 'body-first-active': index === 0 }, { 'body-two-active': index === 1 }, { 'body-last-active': index === 2 }]">
 										{{ vip.vipConTimes }}个
 									</div>
 								</div>
 
 								<!-- 价格 -->
-								<div class="myVipCon-li-con-item flex align-center justify-between">
-									<div class="myVipCon-li-con-items" style="font-weight: 500;">价格</div>
-									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1">免费</div>
+								<div class="myVipCon-li-con-item flex align-center justify-between table-body border-bottom-radius">
+									<div class="myVipCon-li-con-items border-right">价格</div>
+									<div class="myVipCon-li-con-items myVipCon-li-con-itemscolor1 border-right">免费</div>
 									<div v-for="(vip, index) in viplist" :key="index"
-										class="myVipCon-li-con-items myVipCon-li-con-itemscolor2">
+										:class="['myVipCon-li-con-items', 'myVipCon-li-con-itemscolor2', 'border-right', { 'body-first-active': index === 0 }, { 'body-two-active': index === 1 }, { 'body-last-active': index === 2 }]">
 										{{ vip.money }}/{{ vipNameTypeText(vip.vipNameType) }}
 									</div>
 								</div>
@@ -239,29 +238,24 @@
 						<div v-if="userType==2 && isUserVip==false"
 							class="myVipCon-btn flex align-center justify-between">
 							<div class="myVipCon-btn-l flex align-center">
-								<el-dropdown style="width: 100%;" :hide-after-click="false" @click.stop>
-									<span class="el-dropdown-link flex align-center justify-between" style="width: 100%; padding: 0 20px;">
-										<span style="color: #fff">{{ selectedPlan || '选择套餐' }}{{ vipPrice }}</span>
-										<el-icon class="el-icon--right">
-											<arrow-down />
-										</el-icon>
-									</span>
-									<template #dropdown>
-										<el-dropdown-menu>
-											<el-dropdown-item 
-												v-for="(plan, index) in viplist" 
-												:key="plan.id"
-												@click.stop="selectPlan(plan)">
-												{{ plan.vipName }}
-												<span style="margin-left: 10px;">
-													{{ plan.money }}元
-												</span>
-											</el-dropdown-item>
-										</el-dropdown-menu>
-									</template>
-								</el-dropdown>
+								<!-- 自定义选择套餐按钮 -->
+								<div class="plan-select" @click.stop="dropdownVisible = !dropdownVisible">
+									<span>{{ selectedPlan || '选择套餐' }} {{ vipPrice }}</span>
+									<el-icon class="el-icon--right"><arrow-down /></el-icon>
+								</div>
+
+								<!-- 自定义下拉列表 -->
+								<div v-if="dropdownVisible" class="plan-dropdown">
+									<div class="myVipCon-li-sj"></div>
+									<div v-for="plan in viplist" :key="plan.id" class="plan-item"
+										@click.stop="selectPlan(plan)">
+										{{ plan.vipName }} - {{ plan.money }}元
+									</div>
+								</div>
 							</div>
-							<div @click.stop="openVipMenber()" class="myVipCon-btn-r flex align-center justify-center">
+
+							<!-- 立即开通按钮 -->
+							<div class="myVipCon-btn-r flex align-center justify-center" @click.stop="openVipMenber">
 								立即开通
 							</div>
 						</div>
@@ -691,6 +685,7 @@
 		},
 		data() {
 			return {
+				dropdownVisible: false,
 				templateUrl: 'https://h5.bosszan.com/员工在职证明-亿职赞模板.docx',
 				codeUrl: '', //微信二维码支付URL;
 				alPay: '',
@@ -1549,6 +1544,7 @@
 				this.selectedPlan = plan.vipName;
 				// 更新会员价格
 				this.vipPrice = plan.money;
+				this.dropdownVisible = false
 			},
 			//会员简历刷新次数
 			getVipPeople() {
@@ -2041,7 +2037,17 @@
 				margin-top: 5px;
 			}
 		}
-
+		.myVipCon-li-sj {
+			position: absolute;
+			width: 0;
+			height: 0;
+			border-left: 10px solid transparent;
+			border-right: 10px solid transparent;
+			border-bottom: 10px solid #FFFFFF;
+			top: -8px;
+			left: 50%;
+			transform: translate(-50%, 0);
+		}
 		.myVipCon-li {
 			margin-top: 20px;
 			width: 100%;
@@ -2050,41 +2056,45 @@
 			border-radius: 13px;
 			position: relative;
 
-			.myVipCon-li-sj {
-				position: absolute;
-				width: 0;
-				height: 0;
-				border-left: 10px solid transparent;
-				border-right: 10px solid transparent;
-				border-bottom: 10px solid #FFFFFF;
-				top: -8px;
-				left: 50%;
-				transform: translate(-50%, 0);
-			}
+			
 
 			.myVipCon-li-con {
 				padding: 20px 0;
-
 				.myVipCon-li-con-item {
 					width: 100%;
+					font-size: 10px;
+				}
+				.table-header .myVipCon-li-con-items:first-child {
+					border-top-left-radius: 13px;
+				}
+				.table-header .myVipCon-li-con-items:last-child {
+					border-top-right-radius: 13px;
 				}
 
 				.myVipCon-li-con-itemscolor1 {
-					color: #999999 !important;
+					color: #666 !important;
 				}
 
-				.myVipCon-li-con-itemscolor2 {
-					color: #DE8D5C !important;
-				}
 
 				.myVipCon-li-con-items {
-					width: 70px;
+					// width: 70px;
 					text-align: center;
 					padding: 10px 0;
-					color: #333333;
+					color: #171725;
 					font-weight: 400;
-					font-size: 13px;
 					position: relative;
+					flex: 1;
+				}
+				.header-cell {
+					font-weight: 500;
+					background: #dbd8d8;
+					color: #171725;
+				}
+				.border-right{
+					border-right: 2px solid #FFFFFF;
+				}
+				.myVipCon-li-con-itemscolor2:last-child {
+					border-right: none;
 				}
 			}
 		}
@@ -2112,9 +2122,8 @@
 				border-radius: 36px 0px 0px 36px;
 				color: #FEBB90;
 				font-weight: 500;
-
+				position: relative;
 				span {
-					margin-left: 20px;
 					font-size: 18px;
 				}
 			}
@@ -2238,7 +2247,6 @@
 		left: 0px;
 		background: linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
 		color: rgba(255, 255, 255, 1);
-		font-family: DM Sans;
 		font-size: 6px;
 		font-weight: 400;
 		line-height: 7px;
@@ -2264,4 +2272,119 @@
 			z-index: -1;
 		}
 	}
+	.plan-tag-right {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+		background: linear-gradient(132.53deg, rgba(106.94185638427734, 84.63434600830078, 214.0178680419922, 0.96), rgba(144.87640380859375, 87.8011474609375, 191.25, 1) 95%);
+		color: rgba(255, 255, 255, 1);
+		font-size: 6px;
+		font-weight: 400;
+		line-height: 7px;
+		letter-spacing: 0px;
+		text-align: left;
+		padding: 2px 6px;
+		border-radius: 0 8px;
+		transform-origin: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: inherit;
+			transform: rotate(-45deg);
+			z-index: -1;
+		}
+	}
+	.table-header{
+		background: #f6f6f6;
+		border-bottom: 2px solid #FFFFFF;
+		font-size: 13px !important;
+	}
+	.table-body{
+		background: #f6f6f6;
+		border-bottom: 2px solid #FFFFFF;
+	}
+	.border-top-radius{
+		border-top-left-radius: 13px;
+		border-top-right-radius: 13px;
+	}
+	.border-bottom-radius{
+		border-bottom-left-radius: 13px;
+		border-bottom-right-radius: 13px;
+	}
+	.border-bottom-radius .myVipCon-li-con-items:last-child{
+		border-bottom-right-radius: 13px;
+	}
+	.first-active {
+		background: linear-gradient(135deg, rgba(255, 187, 141, 0.4), rgba(255, 102, 0, 0.4) 100%) !important;
+		color: #e05a00 !important;
+		font-weight: 600 !important;
+	}
+	.two-active{
+		background: linear-gradient(135deg, rgba(255, 180, 180, 0.6), rgba(255, 89, 89, 0.6) 100%);
+		color: #ff3e3e !important;
+		font-weight: 600 !important;
+	}
+	.last-active{
+		background: linear-gradient(133.74deg, #fbe7b9, #f0b048 100%);
+		color: #d48300 !important;
+		font-weight: 600 !important;
+	}
+	.body-first-active{
+		color: #e05a00 !important;
+		font-weight: 600 !important;
+		background: #fef0e5 !important;
+	}
+	.body-two-active{
+		color: #ff3e3e !important;
+		font-weight: 600 !important;
+		background: #ffebeb !important;
+	}
+	.body-last-active{
+		color: #f57c00 !important;
+		font-weight: 600 !important;
+		background: #feeed1 !important;
+	}
+	.plan-select {
+		padding: 0 20px;
+		cursor: pointer;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		flex: 1;
+	}
+
+	.plan-dropdown {
+		margin-top: 5px;
+		border: 1px solid #ccc;
+		border-radius: 6px;
+		background: #fff;
+		position: absolute;
+		top: 44px;
+		left: 50%;
+		transform: translateX(-50%);
+		color: #606266;
+		font-weight: 400;
+		width: 60%;
+	}
+
+	.plan-item {
+		padding: 8px 10px;
+		cursor: pointer;
+		text-align: center;
+		
+	}
+
+	.plan-item:hover {
+		background-color: #c9ffec;
+		color: #06E1AB;
+	}
 </style>