job-pc/src/components/job/home/hot-company/index.vue

<!-- slice(0,6), 6,14 -->
<template>
	<a-typography style="margin-top: 36px;">
		<a-flex justify="center">
			<a-space :size="50">
				<a-typography-title>热门企业</a-typography-title>
			</a-space>
		</a-flex>
		<a-typography-paragraph>
			<a-row :gutter="[10,10]">
				<a-col span="18">
					<a-row :gutter="[10,10]">
						<a-col span="8" v-for="(item, index) in data1">
							<a-card hoverable style="width: 100%;height: 222px;" @click="toCompanyDetail(item.id)">
								<template #cover>
									<div style="width: 100%;padding-top: 20px;">
										<a-flex justify="center" align="center">
											<image-container
												:imgObj="{src: 'https://admin1.jcjob.cn/img/' + item.image_url, width: adposition.width+'px',height: adposition.height+'px', mode: ''}"></image-container>
										</a-flex>
									</div>
								</template>
								<a-space direction="vertical" align="center" :size="2" style="width: 100%;">
									<div style="font-size: 16px;font-weight: bold;text-align: center;height: 48px;">
										{{item.company_name ? item.company_name : '企业'}}
									</div>
									<div>{{item.company_nature}} <span v-if="item.company_scale">·</span> {{item.company_scale}}
									</div>
								</a-space>
							</a-card>
						</a-col>
					</a-row>
				</a-col>
				<a-col span="6">
					<a-row :gutter="[10,10]">
						<a-col span="24">
							<a-card style="width: 100%;height: 454px;overflow: auto; background-color: #fff;border-radius: 8px;">
								<template #title>
									<div class="text-decoration">
										<h4 class="text-content">热门资讯</h4>
									</div>
								</template>
								<a-space direction="vertical" style="cursor: pointer;" :size="20">
									<template v-for="(item,index) in articleList">
										<a-flex v-if="index + 1 == 1" align="center">
											<a-space>
												<a-avatar :size="26" style="background-color: #ff1a1a">
													<a-flex justify="center" align="center">
														<span style="font-size: 14px;font-weight: bold;">{{index + 1}}</span>
													</a-flex>
												</a-avatar>
											<div style="font-size: 16px;">{{ item.title }}</div>
											</a-space>
										</a-flex>
										<a-flex v-if="index + 1 == 2" align="center" style="width: 100%;">
											<a-space>
												<a-avatar :size="26" style="background-color: #ff4d4d">
													<a-flex justify="center" align="center">
														<span style="font-size: 14px;font-weight: bold;">{{index + 1}}</span>
													</a-flex>
												</a-avatar>
												<div style="font-size: 16px;">{{ item.title }}</div>
											</a-space>

										</a-flex>
										<a-flex v-if="index + 1 == 3" align="center" style="width: 100%;">
											<a-space>
												<a-avatar :size="26" style="background-color: #ff6b6b">
													<a-flex justify="center" align="center">
														<span style="font-size: 14px;font-weight: bold;">{{index + 1}}</span>
													</a-flex>
												</a-avatar>
											<div style="font-size: 16px;">{{ item.title }}</div>
											</a-space>

										</a-flex>
										<a-flex v-if="index + 1 >= 4" align="center" style="width: 100%;">
											<a-space>
												<a-avatar :size="26">
													<a-flex justify="center" align="center">
														<span style="font-size: 14px;font-weight: bold;">{{index + 1}}</span>
													</a-flex>
												</a-avatar>
												<div style="font-size: 16px;">{{ item.title }}</div>
											</a-space>
										</a-flex>
									</template>
								</a-space>
							</a-card>
						</a-col>
					</a-row>
				</a-col>
			</a-row>
			<template v-if="showData">
				<a-row :gutter="[10,10]" style="margin-top: 10px;">
					<a-col span="6" v-for="(item, index) in data2">
						<a-card hoverable style="width: 100%;height: 222px;" @click="toCompanyDetail(item.id)">
							<template #cover>
								<div style="width: 100%;padding-top: 20px;">
									<a-flex justify="center" align="center">
										<image-container
											:imgObj="{src: imageprefix + item.image_url, width: adposition.width+'px',height: adposition.height+'px',mode: 'fill'}"></image-container>
									</a-flex>
								</div>
							</template>
							<a-space direction="vertical" align="center" :size="2" style="width: 100%;">
								<div style="font-size: 16px;font-weight: bold;text-align: center;height: 48px;">
									{{item.company_name ? item.company_name : '企业'}}
								</div>
								<div>{{item.company_nature}} <span v-if="item.company_scale">·</span> {{item.company_scale}}
								</div>
							</a-space>
						</a-card>
					</a-col>
				</a-row>
			</template>
		</a-typography-paragraph>
	</a-typography>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue';
	import { GetAdvertscheduleList, GetArticleList } from '@/apis/models';
	import { router } from '@/router';
	import { useCommon } from '@/hooks/useCommon';
	let { imageprefix } = useCommon();
	let data1 = ref([])
	let data2 = ref([])
	let adposition = ref(null)
	let showData = ref(false)
	let articleList = ref([])

	const getData = () => {
		GetAdvertscheduleList({ pagesize: 20, area_id: 13 }).then(res => {
			adposition.value = res.data.advertarea;
			sliceData(res.data.advertschedules)
		})
	}

	const sliceData = (val) => {
		if (val.length > 14) {
			data1.value = val.slice(0, 6)
			data2.value = val.slice(6, 14)
			showData.value = true;
		} else {
			data1.value = val;
			showData.value = false;
		}
	}


	const getSection = () => {
		GetArticleList({ pagesize: 8, hot: 2 }).then(res => {
			articleList.value = res.data.articles;
		})
	}

	const toCompanyDetail = (val : Number) => {
		sessionStorage.setItem('pubilc_id', val)
		sessionStorage.setItem('mode', 'detail')
		router.push({
			path: '/personal'
		})
	}


	onMounted(() => {
		getData()
		getSection()
	})
</script>

<style lang="less" scoped>
	.text-decoration {
		position: relative;
		display: inline-block;
		overflow: visible;
	}

	.text-decoration::before {
		content: '';
		width: 6px;
		height: 22px;
		background-color: #4FBE70;
		transform: rotate(10deg);
		position: absolute;
		top: 4px
	}

	.text-content {
		position: relative;
		margin-left: 20px;
	}
</style>