u
This commit is contained in:
oneao committed
1 parent
07e0001b87
commit
46cbb2f50d
543 files changed
+32576
-4231
No files matched your search
@@ -0,0 +1,175 @@
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
|
||||
|
||||
defineProps({
|
||||
recommedCompanies: {
|
||||
type: Object as PropType<RecommendCompany[]>,
|
||||
},
|
||||
recommedHotCompanies: {
|
||||
type: Object as PropType<RecommendHotCompany[]>,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="recommend">
|
||||
<div class="left">
|
||||
<div class="recommend-title">
|
||||
企业名录
|
||||
</div>
|
||||
<div v-if="recommedCompanies && recommedCompanies.length > 0" class="area-list">
|
||||
<div v-for="(item, index) in recommedCompanies" :key="index" class="area-row">
|
||||
<div class="area-name">
|
||||
{{ item.shengName }} {{ item.shiName }}
|
||||
</div>
|
||||
<div class="area-company-box">
|
||||
<div class="area-company-list">
|
||||
<div v-for="company in item.companies" :key="company.id" class="area-company-item" :style="{ color: company.color || '#000' }">
|
||||
{{ company.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无企业名录" style="background-color: #fff;" />
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="hot-card">
|
||||
<div class="hot-card-title">
|
||||
热门推荐
|
||||
</div>
|
||||
<div class="hot-card-list">
|
||||
<template v-if="recommedHotCompanies && recommedHotCompanies.length > 0">
|
||||
<div
|
||||
v-for="(item, i) in recommedHotCompanies"
|
||||
:key="item.id"
|
||||
class="hot-card-item"
|
||||
>
|
||||
<span class="number">{{ i + 1 }}</span>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-empty v-else description="暂无热门推荐" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.recommend {
|
||||
width: 100%;
|
||||
padding: 0 128px;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
.left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 20%;
|
||||
margin-left: 32px;
|
||||
.hot-card {
|
||||
width: 100%;
|
||||
|
||||
.hot-card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
.hot-card-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
.number {
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: 12px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-title,
|
||||
.hot-card-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.area-list {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
|
||||
.area-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid #e0e3e8;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.area-row:hover {
|
||||
}
|
||||
|
||||
.area-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.area-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 15%;
|
||||
background-color: #fcfcfd;
|
||||
color: #34495e;
|
||||
font-weight: bold;
|
||||
border-right: 1px solid #e0e3e8;
|
||||
padding: 12px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.area-company-box {
|
||||
flex: 1;
|
||||
padding: 14px 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.area-company-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 16px;
|
||||
}
|
||||
|
||||
.area-company-item {
|
||||
padding-left: 10px;
|
||||
line-height: 1.8;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.area-company-item:hover {
|
||||
color: #1e80ff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,123 @@
|
||||
<script lang="ts" setup>
|
||||
import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import QueryCompany from '@/components/QueryCompany.vue'
|
||||
import { getRecommendCompanyApi, getRecommendHotCompanyApi } from '@/request/api/company'
|
||||
import { useCommonStore } from '@/store/common'
|
||||
import Recommend from './components/recommend.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const commonStore = useCommonStore()
|
||||
|
||||
const carouselList = [
|
||||
{ img: '/ship-8263464_1920.jpg', href: '' },
|
||||
{ img: '/ship-8263464_1920.jpg', href: '' },
|
||||
{ img: '/ship-8263464_1920.jpg', href: '' },
|
||||
]
|
||||
|
||||
const recommendCompanies = ref<RecommendCompany[]>([])
|
||||
const recommendHotCompanies = ref<RecommendHotCompany[]>([])
|
||||
|
||||
onMounted(() => {
|
||||
getRecommendCompanyApi().then((res) => {
|
||||
if (res.isSuccess) {
|
||||
recommendCompanies.value = res.data
|
||||
}
|
||||
})
|
||||
getRecommendHotCompanyApi().then((res) => {
|
||||
if (res.isSuccess) {
|
||||
recommendHotCompanies.value = res.data
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function handleSearch() {
|
||||
router.push('/company')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 轮播图 -->
|
||||
<el-carousel class="carousel">
|
||||
<el-carousel-item v-for="item in carouselList" :key="item.href">
|
||||
<img :src="item.img">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
<!-- 内容浮在轮播图上 -->
|
||||
<div class="content">
|
||||
<div class="intro">
|
||||
<span class="intro-heading">连接优质企业伙伴</span>
|
||||
</div>
|
||||
|
||||
<div class="query">
|
||||
<QueryCompany v-model="commonStore.companyQuery" :industries="commonStore.industryOptions" :areas="commonStore.areaOptions" @search="handleSearch"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Recommend :recommed-companies="recommendCompanies" :recommed-hot-companies="recommendHotCompanies" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 轮播图 */
|
||||
.carousel {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
:deep(.el-carousel__container) {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.el-carousel__item) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* 内容浮在轮播图上 */
|
||||
.content {
|
||||
position: absolute;
|
||||
top: 260px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
|
||||
.intro-heading {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.intro-detail {
|
||||
font-size: 18px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.query {
|
||||
width: 1240px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user