640 lines
20 KiB
Vue
640 lines
20 KiB
Vue
<script setup lang="ts">
|
||
import EquipCard from 'components/equipCard.vue'
|
||
import EquipCardNew from 'components/equipCardNew/index.vue'
|
||
import NavMenu from 'components/Navmenu/index.vue'
|
||
import { getGoodsClassListApi, getCompanyListApi } from 'http/api/home'
|
||
import { mainStore } from 'store/main'
|
||
import { getHotList } from 'http/api/equip'
|
||
import { reactive, ref } from 'vue'
|
||
import baseData from '@/assets/baseInformation.json'
|
||
|
||
import imgSrc from '../../assets/img/home/nw.png'
|
||
|
||
const router: any = useRouter()
|
||
|
||
// const leftNavList: any = ref([])
|
||
const companyList: any = ref([])
|
||
const classList: any = ref([])
|
||
|
||
const selectOptions = ref<boolean>(false) // 分类
|
||
const selectOptionsValue = ref<string>('分类筛选')
|
||
|
||
const loopList = ref([
|
||
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
|
||
// 'https://jmy-pic.baidu.com/0/pic/-1857035387_-1067811148_-1621691324.png',
|
||
imgSrc,
|
||
])
|
||
// 获取商品分类
|
||
const getGoodsClassList = async () => {
|
||
const res: any = await getGoodsClassListApi()
|
||
console.log(res, '商品分类列表')
|
||
|
||
// leftNavList.value = res.rows
|
||
classList.value = res.data
|
||
}
|
||
|
||
getGoodsClassList()
|
||
|
||
// 获取公司名称
|
||
const getCompanyListData = async () => {
|
||
const res: any = await getCompanyListApi()
|
||
companyList.value = res.data
|
||
console.log('res公司名称', res)
|
||
}
|
||
|
||
getCompanyListData()
|
||
|
||
// 点击跳转装备共享大厅
|
||
const onSharedHall = (level: number, typeId: any) => {
|
||
router.push({
|
||
name: 'equipList',
|
||
query: {
|
||
level,
|
||
typeId,
|
||
},
|
||
})
|
||
}
|
||
const onSharedHallByCompany = (companyId: any) => {
|
||
router.push({
|
||
name: 'equipList',
|
||
query: {
|
||
companyId,
|
||
},
|
||
})
|
||
}
|
||
|
||
const handlerGoodsDetails = (...arg: any) => {
|
||
const arr = arg.map((key: any, index: number) => {
|
||
return {
|
||
level: index + 1 + '',
|
||
typeId: key.id,
|
||
typeName: key.name,
|
||
}
|
||
})
|
||
|
||
router.push({
|
||
name: 'equipList',
|
||
state: { typeTag: arr },
|
||
})
|
||
}
|
||
|
||
const goInformation = (id) => {
|
||
router.push({
|
||
path: `/consultationDetails/${id}`,
|
||
})
|
||
}
|
||
|
||
const detailsList = ref([])
|
||
|
||
const handelInformation = () => {
|
||
detailsList.value = baseData.map((item) => {
|
||
return {
|
||
v_title: item.title,
|
||
v_content_info: '',
|
||
v_time: `[${item.create_time}]`,
|
||
id: item.id,
|
||
}
|
||
})
|
||
}
|
||
handelInformation()
|
||
|
||
const hotDeviceList: any = ref([])
|
||
|
||
/* 获取热搜装备 */
|
||
const getHotDeviceList = async () => {
|
||
const res: any = await getHotList({ pageSize: 3 })
|
||
hotDeviceList.value = res.rows
|
||
console.log(res, '热搜装备111')
|
||
}
|
||
|
||
getHotDeviceList()
|
||
|
||
/* 热搜卡片点击跳转至详情页 */
|
||
const onClick = (val: any) => {
|
||
router.push(`/equipDetail/${val.id}`)
|
||
}
|
||
|
||
// 分类点击事件
|
||
const onSelectOptions = () => {
|
||
selectOptions.value = !selectOptions.value
|
||
}
|
||
|
||
// 分类选择事件
|
||
const onSelectItem = (type: number) => {
|
||
if (type === 1) {
|
||
selectOptionsValue.value = '分类筛选'
|
||
} else {
|
||
selectOptionsValue.value = '公司筛选'
|
||
}
|
||
selectOptions.value = false
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="home-index-banner">
|
||
<div class="home-index">
|
||
<!-- 商品菜单导航以及轮播图区域 -->
|
||
<div class="home-goods">
|
||
<ul class="left-nav">
|
||
<!-- 左侧机械名称菜单按钮 -->
|
||
<li class="left-filter" @click="onSelectOptions">
|
||
{{ selectOptionsValue }}
|
||
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
|
||
|
||
<div class="select-options" v-if="selectOptions">
|
||
<div @click.stop="onSelectItem(1)">分类筛选</div>
|
||
<div @click.stop="onSelectItem(2)">公司筛选</div>
|
||
</div>
|
||
</li>
|
||
|
||
<template v-if="selectOptionsValue === '分类筛选'">
|
||
<div v-for="item in classList" :key="item.name" class="item-container">
|
||
<li class="item-nav" @click="onSharedHall(1, item.id)">
|
||
{{ item.name }}
|
||
<ul class="sub-goods">
|
||
<!-- 级联框内 类别名称 -->
|
||
<li
|
||
v-for="child in item.children"
|
||
:key="child.id"
|
||
@click="onSharedHall(2, child.id)"
|
||
>
|
||
<!-- 第二级 -->
|
||
<span class="second-name">
|
||
{{ child.name }}
|
||
</span>
|
||
|
||
<span style="display: flex; flex: 1; flex-wrap: wrap">
|
||
<a
|
||
v-for="son in child.children"
|
||
:key="son.id"
|
||
style="font-size: 14px; font-weight: normal"
|
||
@click="onSharedHall(3, son.id)"
|
||
>
|
||
{{ son.name }}
|
||
</a>
|
||
</span>
|
||
|
||
<!-- <span style="display: flex; flex: 1">
|
||
<span
|
||
v-for="son in child.children"
|
||
:key="son.id"
|
||
style="font-size: 14px; font-weight: normal"
|
||
@click="onSharedHall(3, son.id)"
|
||
>
|
||
{{ son.name }} -->
|
||
|
||
<!-- <span
|
||
style="
|
||
width: 70%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
"
|
||
>
|
||
<span
|
||
v-for="son_1 in son.children"
|
||
:key="son_1.id"
|
||
style="
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
padding: 0 2px;
|
||
border-bottom: 1px solid #ccc;
|
||
"
|
||
class="last-level"
|
||
@click="onSharedHall(4, son_1.id)"
|
||
>
|
||
{{ son_1.name }}
|
||
</span>
|
||
</span> -->
|
||
<!-- </span>
|
||
</span> -->
|
||
|
||
<!-- <span>{{ child.name }}</span>
|
||
<span>
|
||
<a
|
||
v-for="son in child.children"
|
||
:key="son.id"
|
||
@click="handlerGoodsDetails(item, child, son)"
|
||
>
|
||
{{ son.name }}
|
||
</a>
|
||
</span> -->
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<div
|
||
v-for="item in companyList"
|
||
:key="item.companyId"
|
||
class="item-container"
|
||
>
|
||
<li class="item-nav" @click="onSharedHallByCompany(item.companyId)">
|
||
{{ item.companyName }}
|
||
</li>
|
||
</div>
|
||
</template>
|
||
</ul>
|
||
<div class="right-content">
|
||
<!-- 轮播图上方导航按钮 -->
|
||
<NavMenu />
|
||
<!-- 轮播图 -->
|
||
<div class="swiper-img">
|
||
<el-carousel :interval="5000" arrow="always" style="height: 100%">
|
||
<el-carousel-item
|
||
v-for="(item, index) in loopList"
|
||
:key="index"
|
||
style="height: 100%"
|
||
>
|
||
<el-image
|
||
style="width: 100%; height: 100%"
|
||
:src="item"
|
||
fit="cover"
|
||
/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 热搜装备 -->
|
||
|
||
<div class="hot-equip-container">
|
||
<div class="hot-equip">
|
||
<span>最新装备</span>
|
||
<a>查看更多</a>
|
||
</div>
|
||
|
||
<ul class="equip-pic">
|
||
<li v-for="item in hotDeviceList" :key="item.maId" style="cursor: pointer">
|
||
<!-- <EquipCardNew
|
||
@onClick="onClick"
|
||
:company="item.companyName || '安徽博诺斯有限公司'"
|
||
:price="item.dayLeasePrice"
|
||
:tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
|
||
:name="item.modelName + item.deviceName"
|
||
:url="item.picUrl"
|
||
:id="item.maId"
|
||
/> -->
|
||
<EquipCardNew
|
||
@onClick="onClick"
|
||
:id="item.maId"
|
||
:company="item.companyName"
|
||
:name="item.deviceName"
|
||
:price="item.dayLeasePrice"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 专题咨询 -->
|
||
|
||
<div class="hot-equip">
|
||
<span>专题资讯</span>
|
||
<a></a>
|
||
</div>
|
||
|
||
<ul class="consult-nav">
|
||
<li>
|
||
<a>资讯</a>
|
||
</li>
|
||
<li>
|
||
<a>专题</a>
|
||
</li>
|
||
<li>
|
||
<a>检验</a>
|
||
</li>
|
||
<li>
|
||
<a>保险</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="consult-content">
|
||
<!-- 左侧背景图片 -->
|
||
<div class="left-bg"></div>
|
||
|
||
<!-- 右侧信息 -->
|
||
<div class="right-consult">
|
||
<div
|
||
class="consult-box"
|
||
@click="goInformation(item.id)"
|
||
v-for="item in detailsList"
|
||
:key="item.v_time"
|
||
>
|
||
<div class="consult-title">
|
||
<h3>{{ item.v_title }}</h3>
|
||
<span>{{ item.v_time }}</span>
|
||
</div>
|
||
|
||
<div class="consult-info">
|
||
{{ item.v_content_info }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.el-carousel__container) {
|
||
.el-carousel__item {
|
||
.el-image {
|
||
height: 100%;
|
||
img {
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.home-index-banner {
|
||
background-color: #fff;
|
||
padding: 20px 15px;
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.home-index {
|
||
.home-goods {
|
||
height: 500px;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.left-nav {
|
||
// padding: 10px 0;
|
||
// margin-top: 8px;
|
||
width: 200px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-color: #f7f9fa;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
|
||
.left-filter {
|
||
margin-top: 10px;
|
||
padding: 3px 0;
|
||
position: relative;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: center;
|
||
color: #38b2a4;
|
||
// height: 46px;
|
||
// line-height: 46px;
|
||
// text-align: center;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
|
||
.select-options {
|
||
position: absolute;
|
||
width: 120%;
|
||
left: 50%;
|
||
bottom: -65px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||
transform: translateX(-50%);
|
||
background-color: #fff;
|
||
|
||
div {
|
||
padding: 8px 6px;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
cursor: pointer;
|
||
color: #333;
|
||
}
|
||
div:hover {
|
||
color: #38b2a4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-container {
|
||
width: 100%;
|
||
text-align: center;
|
||
.item-nav {
|
||
// text-align: left;
|
||
// padding-left: 50px;
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
padding: 0 10px;
|
||
color: #000;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
text-align: center;
|
||
font-size: 16px !important;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
// color: #2282ff;
|
||
// font-weight: bold;
|
||
background-color: #1abc9c;
|
||
border-radius: 18px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.sub-goods {
|
||
position: absolute;
|
||
display: none;
|
||
top: 0;
|
||
left: 200px;
|
||
width: 915px;
|
||
min-height: 100%;
|
||
max-height: 100%;
|
||
background-color: #fff;
|
||
z-index: 999;
|
||
// opacity: 0.9;
|
||
border: 1px solid #eee;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
|
||
li {
|
||
// margin: 10px 0;
|
||
color: #333;
|
||
font-weight: bold;
|
||
display: flex;
|
||
|
||
.second-name {
|
||
width: 160px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
span a {
|
||
margin: 0 15px;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
color: #333;
|
||
&:hover {
|
||
color: #1abc9c;
|
||
border-bottom: 1px solid #1abc9c !important;
|
||
}
|
||
}
|
||
|
||
.last-level {
|
||
margin-left: 3px;
|
||
}
|
||
|
||
.last-level:hover {
|
||
color: #1abc9c;
|
||
border-bottom: 1px solid #1abc9c !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.item-container:hover {
|
||
.sub-goods {
|
||
display: block !important;
|
||
z-index: 9999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-content {
|
||
flex: 1;
|
||
height: 100%;
|
||
margin-left: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.swiper-img {
|
||
flex: 1;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hot-equip {
|
||
margin-top: 30px;
|
||
height: 37px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
background-color: #1abc9c;
|
||
padding: 10px 18px;
|
||
color: #fff;
|
||
}
|
||
|
||
a {
|
||
color: rgba(24, 103, 221, 0.8);
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.equip-pic {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
li {
|
||
width: calc((100% - 100px) / 4);
|
||
margin: 8px 0 8px 20px;
|
||
&:nth-child(4n) {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.consult-nav {
|
||
width: 100%;
|
||
height: 40px;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
display: flex;
|
||
|
||
li {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
margin: 0 15px;
|
||
|
||
&:hover {
|
||
border-bottom: 1px solid #3cb4a6;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
.consult-content {
|
||
margin-top: 20px;
|
||
height: 210px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.left-bg {
|
||
background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat;
|
||
background-size: cover;
|
||
width: 340px;
|
||
height: 210px;
|
||
}
|
||
|
||
.right-consult {
|
||
height: 210px;
|
||
flex: 1;
|
||
width: calc(100% - 340px);
|
||
// padding-left: 35px;
|
||
overflow-y: auto;
|
||
.consult-box {
|
||
margin-bottom: 10px;
|
||
//height: 70px;
|
||
padding-left: 15px;
|
||
cursor: pointer;
|
||
.consult-title {
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
h2 {
|
||
font-weight: bold;
|
||
}
|
||
|
||
span {
|
||
color: #827d7d;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.consult-info {
|
||
width: calc(100% - 100px);
|
||
height: 10px;
|
||
line-height: 40px;
|
||
border-bottom: 1px dashed #979797;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-carousel__container) {
|
||
height: 100%;
|
||
}
|
||
|
||
/* 适用于 Webkit 浏览器（Chrome, Edge, Safari, etc.） */
|
||
::-webkit-scrollbar {
|
||
width: 6px; /* 滚动条宽度 */
|
||
height: 8px; /* 水平滚动条高度 */
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(0, 0, 0, 0.1); /* 滚动条轨道背景颜色 */
|
||
border-radius: 6px; /* 轨道的圆角 */
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background-color: #138473; /* 滚动条滑块颜色 */
|
||
border-radius: 6px; /* 滑块的圆角 */
|
||
border: 1px solid rgba(0, 0, 0, 0.1); /* 滑块与轨道的边框 */
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background-color: #0f6e53; /* 鼠标悬浮时的滑块颜色，稍微加深 */
|
||
}
|
||
|
||
::-webkit-scrollbar-corner {
|
||
background-color: transparent; /* 滚动条和内容区的角落部分，通常用于表格等 */
|
||
}
|
||
</style>
|