yizhizan-h5/my/enterpriseInfo/enterpriseInfo.vue

<template>
	<view class="content" :style="{ paddingTop: (12 + statusBarHeight + 88 - 60) + 'px' }">
		<!-- 固定顶部导航 -->
		<view class="fixed-nav" :style="{ paddingTop: (12 + statusBarHeight) + 'px' }">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-leftward" color="rgba(51, 51, 51, 1)" style="font-size: 38rpx;"></u-icon>
				</view>
				<view class="nav-title">公司介绍</view>
				<view class="nav-right">
					<view class="nav-icons">
						<view v-if="false" class="nav-icon" @click="setCollection">
							<image v-if="isCollection == 0" src="/static/images/index/guanzhu.svg" class="icon-img">
							</image>
							<image v-else src="/static/images/index/gzActive.svg" class="icon-img"></image>
						</view>
						<view class="nav-icon" @click="showShare">
							<image src="/static/images/index/fenxiang.svg" class="icon-img"></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 企业信息 -->
		<view class="info flex justify-center">
			<view class="info-box flex align-center justify-between">
				<view class="info-box-r">
					<view class="info-box-r-title" v-show="info.companyName">
						{{ info.companyName }}
					</view>
					<view class="info-box-r-label flex align-center flex-wrap">
						<view class="info-box-r-label-item" v-if="info.companyPeople">
							{{ info.companyPeople }}
						</view>

						<!-- <view class="info-box-r-label-item" v-show="info.companyScope">
							{{ info.companyScope }}
						</view> -->
					</view>
					<view class="info-box-r-label-item" v-show="info.companyAllName">
						{{ info.companyAllName ? info.companyAllName : '--' }}
					</view>
				</view>
				<image :src="info.companyLogo ? info.companyLogo : '../../static/logo.png'"
					style="width: 120rpx;height: 120rpx;border-radius: 50%;" mode="">
				</image>
			</view>
		</view>

		<!-- 急聘标签 -->


		<!-- 公司地址 -->
		<view class="address flex justify-center">
			<view class="address-box flex justify-center">
				<view class="address-box-c">
					<!-- 工作时间 -->
					<view class="working-hours flex align-center">
						<u-icon name="clock" color="rgba(51, 51, 51, 1)" size="38"
							style="margin-right: 12rpx;"></u-icon>
						<text>{{ info.workTime }}</text>
					</view>

					<!-- 福利标签 -->
					<view class="benefits-section">
						<view class="benefits-tags flex align-center flex-wrap">
							<view class="benefit-tag" v-for="item in info.welfareArr">
								<image src="/static/images/index/huizhang.svg" class="tag-icon"></image>
								<text>{{ item }}</text>
							</view>

						</view>
					</view>

					<!-- 地址信息 -->
					<view @click="openMap()" class="address-box-c-add flex justify-between align-center">
						<view class="address-box-c-add-l flex align-center">
							<u-icon name="map" style="margin-right: 12rpx;" color="rgba(51, 51, 51, 1)"
								size="24"></u-icon>
							<!-- <text v-if="info.companyAddress">{{ info.province ? info.province : '' }}{{ info.city ? info.city : ''
							}}{{
									info.district ? info.district : '' }}{{ info.companyAddress ? info.companyAddress : ''
								}}</text> -->
							<text v-if="info.companyAddress">{{ info.companyAddress }}</text>
							<text v-else>暂无地址信息</text>
						</view>
						<!-- 
							<view class="address-box-c-add-r">
								<u-icon name="arrow-right" color="rgba(51, 51, 51, 1)" size="24"></u-icon>
							</view>	
						-->
					</view>
				</view>
			</view>
		</view>
		<!-- 企业介绍 -->
		<view class="remarks flex justify-center">
			<view class="remarks-box">
				<view class="remarks-box-title">
					公司介绍
				</view>
				<view class="remarks-box-con">
					<u-read-more show-height="100" :shadow-style="shadowStyle" color="#FD6416" text-indent="0"
						closeText="展开">
						<!-- <rich-text :nodes="info.companyDetails"
							style="color: #ffffff;font-size: 28rpx;font-weight: 500;">
						</rich-text> -->
						<view class="remarks-box-con-item">
							{{ info.companyContent }}
						</view>
					</u-read-more>
				</view>
			</view>
		</view>

		<!-- 主营业务 -->
		<view class="business-section flex justify-center">
			<view class="business-box">
				<view class="business-title">主营业务</view>
				<!-- <view class="business-tags flex flex-wrap" v-if="businessList&&businessList.length>0">
					<view class="business-tag" v-for="(business, index) in businessList" :key="index">
						{{ business }}
					</view>
				</view> -->

				<view class="remarks-box-con-item" v-if="info.companyScope">
					{{ info.companyScope }}
				</view>
				<view class="hr-desc" v-else>
					暂无业务信息
				</view>
			</view>
		</view>

		<!-- hr介绍 -->
		<view class="hr-section flex justify-center">
			<view class="hr-box">
				<view class="hr-header flex justify-between align-center">
					<view class="hr-title">HR介绍</view>
					<view class="view-all-jobs" @click="goToMoreJobs">
						<text>查看所有职位</text>
					</view>
				</view>

				<view class="hr-list flex" v-if="info.hr && info.hr.length > 0">
					<view class="hr-item" v-for="(hr, index) in info.hr" :key="index">
						<view class="hr-content flex align-center">
							<view class="hr-avatar-container">
								<view class="hr-avatar">
									<image :src="hr.hrImg" mode="aspectFill" />
								</view>
								<view class="online-dot"  :style="{'background':hr&&hr.onlineStatus=='ONLINE'?'#00D26A':'#999'}"></view>
							</view>
							<view class="hr-text">
								<view class="hr-name">{{ hr.name }}</view>
								<view class="hr-position">{{ hr.hrPosition }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="hr-desc" v-else>暂无HR信息</view>
			</view>
		</view>

		<!-- 人才发展 -->
		<view class="talent-section flex justify-center">
			<view class="talent-box">
				<view class="talent-title">人才发展</view>
				<view class="talent-tags flex flex-wrap">
					<view class="talent-tag" v-for="(talent, index) in talentList" :key="index">
						{{ talent }}
					</view>
				</view>
			</view>
		</view>

		<!-- 公司风采 -->
		<view class="talent-section flex justify-center">
		  <view class="talent-box">
		    <view class="talent-title">公司风采</view>
		    <!-- 有图片时显示轮播 -->
		   <swiper v-if="info.photos" class="talent-swiper" indicator-dots="true" autoplay="true" interval="3000" circular="true">
		     <swiper-item v-for="(talent, index) in info.photos.split(',')" :key="index">
		       <view class="photo-box">
		         <image :src="talent" mode="aspectFill" class="photoImage"></image>
		       </view>
		     </swiper-item>
		   </swiper>

		
		    <!-- 没有图片时显示提示 -->
		    <view class="hr-desc" v-else>该公司还未上传相关图片！</view>
		  </view>
		</view>

		<!-- 工商信息 -->
		<view class="gsInfo flex justify-center">
			<view class="gsInfo-box flex justify-center">
				<view class="gsInfo-box-c">
					<view class="gsInfo-box-c-title">
						工商信息
					</view>
					<view class="gsInfo-box-c-item">
						公司全称：{{ info.companyAllName ? info.companyAllName : '' }}
					</view>
					<view class="gsInfo-box-c-item">
						成立时间：{{ info.companyCreateTime ? info.companyCreateTime : '--' }}
					</view>
					<view class="gsInfo-box-c-item">
						注册资本：{{ info.companyRegisteredFund ? info.companyRegisteredFund : '--' }}万人民币
					</view>
					<view class="gsInfo-box-c-item">
						法人代表：{{ info.companyLegalPerson ? info.companyLegalPerson : '未知' }}
					</view>
				</view>
			</view>
		</view>

		<!-- 全部岗位弹窗 -->
		<btnPopous ref="jobPopup" v-if="showJobPopup && companyId && classify.length > 0" :companyId="companyId"
			:cittArr="cittArr" :classify="classify" :moneyArr="moneyArr" :jyArr="jyArr" @closePopup="closeJobPopup" />

		<u-popup v-model="shows" z-index="99999" mode="bottom" border-radius="14" height="300rpx">
			<view class="shar flex justify-center">
				<view class="shar-box flex justify-around">
					<view class="shar-box-item" @click="appShare('WXSceneSession')">
						<u-icon name="weixin-circle-fill" color="#45b630" style="margin-left: 10rpx;" size="70">
						</u-icon>
						<view class="">
							微信好友
						</view>
					</view>
					<view class="shar-box-item" @click="appShare('WXSenceTimeline')">
						<u-icon name="moments-circel-fill" color="#6dbf30" size="70" style="margin-left: 20rpx;">
						</u-icon>
						<view class="">
							微信朋友圈
						</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="sharNo" @click="shows = false">
				取消
			</view>
		</u-popup>
	</view>
</template>

<script>
import btnPopous from '../../components/btnPopous/btnPopous.vue'
import config from '../../common/config.js'
export default {
	components: {
		btnPopous
	},
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			backStyle: {
				color: '#ffffff'
			},
			shadowStyle: {
				backgroundImage: 'none',
			},
			companyId: '',
			info: {},
			isCollection: 0, // 收藏状态
			showJobPopup: false, // 控制职位弹窗显示
			cittArr: [], //企业发布岗位的城市数组
			moneyArr: [], //薪资列表数组
			jyArr: [], //工作经验列表数组
			classify: [], //岗位名称数组
			hrList: [
				{
					name: '孙先生',
					position: '人事经理',
					color: '#4A90E2'
				},
				{
					name: '宋先生',
					position: 'HRBP',
					color: '#7ED321'
				},
				{
					name: '邹先生',
					position: 'HR助力',
					color: '#F5A623'
				}
			],
			businessList: [],
			talentList: [],
			sharType: 0,
			sharMsg: '',
			shows: false
		};
	},
	//分享
	onShareAppMessage(res) {
		return {
			path: '/my/enterpriseInfo/enterpriseInfo?companyId=' + this.companyId + '&invitation=' + uni
				.getStorageSync(
					'invitationCode'),
			title: this.info.companyName,
		}
	},
	/*
	 * uniapp微信小程序分享页面到微信朋友圈
	 */
	onShareTimeline(res) {
		return {
			path: '/my/enterpriseInfo/enterpriseInfo?companyId=' + this.companyId + '&invitation=' + uni
				.getStorageSync(
					'invitationCode'),
			title: this.info.companyName,
		}
	},
	// onPageScroll(e) {
	// 	if (e.scrollTop > 100) {
	// 		uni.setNavigationBarTitle({
	// 			title: '西安省钱兄网络科技有限公司'
	// 		})
	// 	} else {
	// 		uni.setNavigationBarTitle({
	// 			title: '企业详情'
	// 		})
	// 	}
	// },
	onLoad(option) {
		// 获取状态栏高度
		let systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;

		// 获取邀请码保存到本地
		if (option.invitation) {
			this.$queue.setData('inviterCode', option.invitation);
		}
		// #ifdef MP-WEIXIN
		if (option.scene) {
			const scene = decodeURIComponent(option.scene);
			this.$queue.setData('inviterCode', scene.split(',')[0]);
		}
		// #endif
		uni.showLoading({
			title: '加载中'
		})
		this.companyId = option.companyId
		this.getInfo();
		this.getCityCompanyId();
		this.getMoney();
		this.getJy();
		this.getClassify();
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		// 显示分享选项
		showShare() {
			// 可以添加分享逻辑
			this.shows = true
		},
		//app分享
		appShare(scene) {
			// #ifdef H5
			this.shar()
			this.shows = false;
			return
			//#endif
			return this.$queue.appShare(scene,this)
			let that = this
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
			uni.share({
				provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
				scene: scene, //场景，可取值参考下面说明。
				type: 5, //分享形式 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
				// href: curRoute, //跳转链接
				// imageUrl:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
				imageUrl: that.sharMsg,
				title: that.info.stationName, //分享内容的标题
				miniProgram: {
					id: 'gh_d531be6accdb', //分享的小程序原始id
					path: curRoute, //分享的小程序的页面路径
					webUrl: "https://ask.dcloud.net.cn/article/287", //地址
					type: that.sharType, //微信小程序的版本  0-正式版； 1-测试版； 2-体验版。 默认值为0。
				},
				success: function (res) {
					that.shows = false; //成功后关闭底部弹框
				},
				fail: function (err) {
					console.log(err, '分享失败回调')
					uni.showToast({
						title: '分享失败',
						icon: 'none',
						duration: 2000
					})
					that.shows = false;
				}
			});
		},
		getShowModal() {
			uni.showModal({
				title: '提示',
				content: '请登录后联系企业',
				showCancel: true,
				cancelText: '取消',
				confirmText: '去登录',
				complete: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/public/login'
						})
					}

				}
			});
		},
		shar() {
			if (uni.getStorageSync('token')) {
				let that = this
				// h5分享
				// #ifdef H5
				let url = config.WSHOST4 + '/my/enterpriseInfo/enterpriseInfo?companyId=' + this.companyId + '&invitation=' + uni
					.getStorageSync(
						'invitationCode')
				// let url = 'http://192.168.0.109:8081/pages/index/game/order?postPushId=' + this.postPushId
				// alert(url)

				uni.setClipboardData({
					data: url,
					success() {
						uni.showToast({
							title: '分享链接已复制'
						})
					}
				})
				// #endif

			} else {
				this.getShowModal()
			}

		},
		// 收藏企业
		setCollection() {
			this.$Request.postT("/app/myCollection/saveCollection", {
				companyId: this.companyId,
				type: 3 // 2表示收藏企业
			}).then(res => {
				if (res.code == 0) {
					uni.showToast({
						title: res.msg
					})
					this.isCollection = this.isCollection == 0 ? 1 : 0;
				}
			})
		},
		// 显示所有职位弹窗
		goToMoreJobs() {
			if (this.classify && this.classify.length <= 0) {
				uni.showToast({
					title: '该公司还未发布岗位！',
					icon: 'none'
				})
				return;
			}
			this.showJobPopup = true;
			this.$nextTick(() => {
				if (this.$refs.jobPopup) {
					this.$refs.jobPopup.topY = true;
				}
			});
		},
		// 关闭职位弹窗
		closeJobPopup() {
			this.showJobPopup = false;
		},
		openMap() {
			let that = this
			if (that.info.companyLat && that.info.companyLng) {
				uni.openLocation({
					latitude: that.info.companyLat,
					longitude: that.info.companyLng,
					address: that.info.province + '' + that.info.city + '' + that.info.district + '' + that
						.info
						.companyAddress,
					name: that.info.companyAddress
				})
			} else {
				uni.showToast({
					title: '暂无位置信息',
					icon: 'none'
				})
			}


		},
		/**
		 * 岗位分类数组
		 */
		getClassify() {
			this.$Request.getT("/app/postPush/getCompanyClassifyByCompanyId", {
				companyId: this.companyId
			}).then(res => {
				if (res.code == 0) {
					this.classify = res.data //岗位分类列表数组
				}
			})
		},
		/**
		 * 获取薪资 列表
		 */
		getMoney() {
			this.$Request.get("/app/dict/list", {
				type: '薪资 '
			}).then(res => {
				if (res.code == 0) {
					this.moneyArr = res.data //薪资列表数组
				}
			})
		},
		/**
		 * 获取工作经验列表
		 */
		getJy() {
			this.$Request.get("/app/dict/list", {
				type: '工作经验 '
			}).then(res => {
				if (res.code == 0) {
					this.jyArr = res.data //工作经验列表数组
				}
			})
		},
		/**
		 * 根据公司id查询已发布岗位的市
		 */
		getCityCompanyId() {
			let data = {
				companyId: this.companyId
			}
			this.$Request.getT("/app/postPush/getCityCompanyId", data).then(res => {
				if (res.code == 0) {
					this.cittArr = res.data
				}
			})
		},
		//获取企业详情
		getInfo() {
			let that = this
			this.$Request.get("/app/company/selectCompanyByCompanyId", {
				companyId: this.companyId
			}).then(res => {
				if (res.code == 0) {
					let color = ['#4A90E2', '#7ED321', '#F5A623']
					res.data.welfareArr = res.data.welfare ? res.data.welfare.split(',') : []
					res.data.photosArr = res.data.photosArr ? res.data.photos.split(',') : []
					that.talentList = res.data.companyPeopleDevelop ? res.data.companyPeopleDevelop.split(',') : []
					that.businessList = res.data.workDescribe ? res.data.workDescribe.split(',') : []
					if (res.data.hr) {
						res.data.hr.forEach(function (item, index) {
							if (item) {
								item.name = '匿名'
								item.color = color[index % 3]
								for (const user of res.data.userEntities) {
									if (item.userId == user.userId) {
										item.name = user.userName;
										break; // 直接跳出循环
									}
								}
							}

						})
					}
					this.info = res.data
					if (this.info.companyName) {
						uni.setNavigationBarTitle({
							title: that.info.companyName
						})
					}
					that.isCollection = res.data.isCollect || 0
					// let reg = /.+?(省|市|自治区|自治州|县|区)/g
					// let cityarr = this.info.companyAddress.match(reg)
					// if (cityarr && cityarr != null) {
					// 	if (cityarr.length == 3) {
					// 		this.info.companyAddress = cityarr[0] + '' + cityarr[1] + '' + cityarr[2]
					// 	} else {
					// 		this.info.companyAddress = cityarr[0] + '' + cityarr[1]
					// 	}
					// }
				}
				uni.hideLoading()
			})
		},
	}
}
</script>

<style lang="scss">
page {
	// background-color: #4B4D5C;
	// overflow: hidden;
}

.hr-desc {
	color: rgba(102, 102, 102, 1);
	font-family: DM Sans;
	font-size: 20rpx;
}

.content {
	// padding-top 已改为动态计算，在模板中通过 :style 设置
}

.fixed-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: #ffffff;
	padding: 0 32rpx;
	// padding-top 已改为动态计算，在模板中通过 :style 设置
}

.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding: 0 8rpx;
	// margin-bottom: 30rpx; // 已移除，因为现在是固定导航栏
	// padding: 0 40rpx; // 已调整，因为外层 fixed-nav 已有 padding

	.nav-left {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 96rpx;
	}

	.nav-title {
		color: rgba(34, 37, 42, 1);
		font-family: DM Sans;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: left;
	}

	.nav-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 96rpx;
	}

	.nav-icons {
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.nav-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36rpx;
		height: 36rpx;
	}

	.icon-img {
		width: 42rpx;
		height: 42rpx;
	}
}

.info {
	width: 100%;
	margin-top: 50rpx;

	.info-box {
		width: 686rpx;
		height: 100%;

		.info-box-r {
			width: calc(100% - 150rpx);
		}

		.info-box-r-title {
			color: rgba(58, 57, 67, 1);
			font-family: DM Sans;
			font-size: 42rpx;
			font-weight: 700;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: left;
		}

		.info-box-r-label {
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 500;
			margin-top: 20rpx;

			.info-box-r-label-item {
				color: rgba(153, 153, 153, 1);
				font-family: DM Sans;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 16px;
				letter-spacing: 0%;
				text-align: left;
				margin-right: 10rpx
			}
		}
	}
}

.info-box-r-label-item {
	color: rgba(153, 153, 153, 1);
	font-family: DM Sans;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0%;
	text-align: left;
	margin-right: 10rpx;
	margin-top: 20rpx;
}

.remarks {
	width: 100%;
	margin-top: 50rpx;

	.remarks-box {
		width: 686rpx;

		.remarks-box-title {
			color: rgba(34, 37, 42, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: left;
		}

		.remarks-box-con {
			margin-top: 30rpx;


		}
	}
}

.remarks-box-con-item {
	color: rgba(153, 153, 153, 1);
	font-family: DM Sans;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0px;
	text-align: left;
}

.address {
	width: 100%;
	margin-top: 80rpx;

	.address-box {
		width: 686rpx;
		border-radius: 24rpx;

		.address-box-c {
			width: 100%;

			.working-hours {
				margin-bottom: 24rpx;

				text {
					color: rgba(51, 51, 51, 1);
					font-size: 28rpx;
					font-weight: 400;
				}
			}

			.benefits-section {
				margin-bottom: 24rpx;

				.benefits-tags {
					gap: 12rpx;

					.benefit-tag {
						background: rgba(40, 107, 229, 0.1);
						border-radius: 12rpx;
						padding: 12rpx;
						display: flex;
						align-items: center;
						gap: 8rpx;

						.tag-icon {
							width: 42rpx;
							height: 42rpx;
						}

						text {
							color: rgba(34, 37, 42, 0.5);
							font-family: DM Sans;
							font-size: 20rpx;
							font-weight: 400;
							line-height: 44rpx;
							letter-spacing: 0px;
							text-align: left;
						}
					}
				}
			}

			.address-box-c-add {
				padding: 0;

				.address-box-c-add-l {
					color: rgba(102, 102, 102, 1);
					font-family: DM Sans;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 16px;
					letter-spacing: 0px;
					text-align: left;
				}

				.address-box-c-add-r {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}

.business-section {
	width: 100%;
	margin-top: 30rpx;

	.business-box {
		width: 686rpx;
		background: #ffffff;
		border-radius: 24rpx;

		.business-title {
			color: rgba(34, 37, 42, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: left;
			margin-bottom: 24rpx;
		}

		.business-tags {
			gap: 12rpx;

			.business-tag {
				background: transparent;
				border: 1px solid rgba(153, 196, 250, 1);
				border-radius: 12rpx;
				padding: 6rpx 12rpx;
				color: rgba(40, 107, 229, 1);
				font-family: DM Sans;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 16px;
				letter-spacing: 0px;
				text-align: center;
			}
		}
	}
}

.talent-section {
	width: 100%;
	margin-top: 30rpx;

	.talent-box {
		width: 686rpx;
		background: #ffffff;
		border-radius: 24rpx;

		.talent-title {
			color: rgba(34, 37, 42, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: left;
			margin-bottom: 24rpx;
		}

		.talent-tags {
			gap: 12rpx;

			.talent-tag {
				background: rgba(153, 153, 153, 0.1);
				border-radius: 12rpx;
				padding: 6rpx 12rpx;
				color: rgba(102, 102, 102, 1);
				font-family: DM Sans;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 16px;
				letter-spacing: 0px;
				text-align: center;
			}

			.photo {
				width: 100%;

				
			}
		}
	}
}
.photo-box {
  position: relative;
  width: 100%;
  padding-top: 75%; 
  overflow: hidden;
}

.photoImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hr-section {
	width: 100%;

	.hr-box {
		width: 686rpx;
		background: #ffffff;
		border-radius: 24rpx;

		.hr-header {
			padding: 50rpx 0 0 0;
			margin-bottom: 30rpx;

			.hr-title {
				color: rgba(34, 37, 42, 1);
				font-family: DM Sans;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
			}

			.view-all-jobs {
				text {
					color: rgba(255, 102, 0, 1);
					font-family: DM Sans;
					font-size: 12px;
					font-weight: 400;
					line-height: 16px;
					letter-spacing: 0px;
					text-align: right;
				}
			}
		}

		.hr-list {
			padding: 0 0 30rpx 0;
			flex-wrap: wrap;
			gap: 20rpx;
			.hr-item {
				// flex: 1;

				.hr-content {
					align-items: center;

					.hr-avatar-container {
						position: relative;
						margin-right: 16rpx;

						.hr-avatar {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;

							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}

							.avatar-text {
								color: #ffffff;
								font-size: 32rpx;
								font-weight: 600;
							}
						}

						.online-dot {
							position: absolute;
							bottom: 4rpx;
							right: 4rpx;
							width: 20rpx;
							height: 20rpx;
							background-color: #7ED321;
							border-radius: 50%;
							border: 3rpx solid #ffffff;
						}
					}

					.hr-text {
						.hr-name {
							color: rgba(34, 37, 42, 1);
							font-family: DM Sans;
							font-size: 28rpx;
							font-weight: 500;
							line-height: 20px;
							margin-bottom: 4rpx;
							text-align: left;
						}

						.hr-position {
							color: rgba(153, 153, 153, 1);
							font-family: DM Sans;
							font-size: 24rpx;
							font-weight: 400;
							line-height: 16px;
							text-align: left;
						}
					}
				}
			}
		}
	}
}

.gsInfo {
	width: 100%;
	margin-top: 20rpx;

	.gsInfo-box {
		width: 686rpx;
		height: 100%;
		border-radius: 24rpx;

		.gsInfo-box-c {
			width: 100%;
			height: 100%;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}

		.gsInfo-box-c-title {
			color: rgba(34, 37, 42, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0px;
			text-align: left;
			margin-bottom: 10rpx;
		}

		.gsInfo-box-c-item {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 12px;
			font-weight: 400;
			line-height: 16px;
			letter-spacing: 0%;
			text-align: left;
			margin-bottom: 10rpx;
		}
	}
}

.shar {
	width: 100%;
	height: 100rpx;
	margin-top: 40rpx;

	.shar-box {
		width: 686rpx;
		height: 100%;

		.shar-box-item {
			font-size: 24rpx;
		}
	}
}

.line {
	width: 100%;
	border: 1rpx solid #F2F2F7;
	margin-top: 30rpx;
	margin-bottom: 20rpx;
}

.sharNo {
	width: 100%;
	color: #cccccc;
	font-size: 24rpx;
	text-align: center;
}
</style>