409 lines
12 KiB
Vue
409 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import EquipCard from 'components/equipCard.vue'
|
|
import NavMenu from 'components/Navmenu/index.vue'
|
|
import { getGoodsClassListApi } 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'
|
|
|
|
const router = useRouter()
|
|
|
|
const leftNavList = ref([])
|
|
|
|
const loopList = ref([
|
|
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
|
|
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/41cd93cefd76c28c967f07ad33b5e6fe1575746850588196864475.jpg',
|
|
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/11800b353f4d1332b73f18bf0f2133a31575743878894452736462.jpg',
|
|
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/85a09403e4328a37b2686d20b2fe717e20220728085635540.jpg'
|
|
])
|
|
// 获取商品分类
|
|
const getGoodsClassList = async () => {
|
|
const res = await getGoodsClassListApi()
|
|
console.log(res, '商品分类列表')
|
|
|
|
leftNavList.value = res.rows
|
|
}
|
|
|
|
getGoodsClassList()
|
|
|
|
const handlerGoodsDetails = (...arg) => {
|
|
const arr = arg.map((key, index) => {
|
|
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}`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="home-index-banner">
|
|
<div class="home-index">
|
|
<!-- 商品菜单导航以及轮播图区域 -->
|
|
<div class="home-goods">
|
|
<ul class="left-nav">
|
|
<!-- 左侧机械名称菜单按钮 -->
|
|
<li class="item-nav" v-for="item in leftNavList" :key="item.name">
|
|
{{ item.name }}
|
|
<ul class="sub-goods">
|
|
<!-- 级联框内 类别名称 -->
|
|
<li v-for="child in item.children" :key="child.id">
|
|
<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>
|
|
</ul>
|
|
<div class="right-content">
|
|
<!-- 轮播图上方导航按钮 -->
|
|
<NavMenu />
|
|
<!-- 轮播图 -->
|
|
<div class="swpier-img">
|
|
<el-carousel :interval="5000" arrow="always" height="437px">
|
|
<el-carousel-item v-for="(item, index) in loopList" :key="index">
|
|
<!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
|
|
<el-image style="width: 100%" :src="item" fit="cover" />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 热搜装备 -->
|
|
<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">
|
|
<EquipCard
|
|
@onClick="onClick"
|
|
:company="item.companyName || '安徽博诺斯有限公司'"
|
|
:price="item.monthLeasePrice"
|
|
:tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
|
|
:name="item.modelName + item.deviceName"
|
|
:url="item.picUrl"
|
|
:id="item.maId" />
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 专题咨询 -->
|
|
|
|
<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;
|
|
|
|
.left-nav {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 100%;
|
|
display: flex;
|
|
background-color: #f7f9fa;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
.item-nav {
|
|
// text-align: left;
|
|
// padding-left: 50px;
|
|
color: #8b8b8b;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: #2282ff;
|
|
font-weight: bold;
|
|
background-color: #1abc9c;
|
|
|
|
.sub-goods {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sub-goods {
|
|
position: absolute;
|
|
display: none;
|
|
top: 0;
|
|
left: 200px;
|
|
width: 500px;
|
|
height: 100%;
|
|
background-color: #f5f4f4;
|
|
z-index: 999;
|
|
opacity: 0.9;
|
|
|
|
li {
|
|
margin: 15px 0;
|
|
color: #333;
|
|
font-weight: bold;
|
|
display: flex;
|
|
|
|
span:first-child {
|
|
width: 160px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
span a {
|
|
margin: 0 15px;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-content {
|
|
flex: 1;
|
|
height: 100%;
|
|
margin-left: 20px;
|
|
|
|
.swpier-img {
|
|
width: 100%;
|
|
height: 437px;
|
|
margin-top: 10px;
|
|
border-radius: 8px;
|
|
|
|
.el-carousel {
|
|
height: 437px;
|
|
}
|
|
|
|
.el-carousel__item h3 {
|
|
color: #475669;
|
|
opacity: 0.75;
|
|
line-height: 300px;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.el-carousel__item:nth-child(2n) {
|
|
background-color: #99a9bf;
|
|
}
|
|
|
|
.el-carousel__item:nth-child(2n + 1) {
|
|
background-color: #d3dce6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hot-equip {
|
|
margin-top: 30px;
|
|
height: 37px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
a {
|
|
color: #9d9d9d;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.equip-pic {
|
|
display: flex;
|
|
align-items: center;
|
|
li {
|
|
width: calc((100% - 30px) / 3);
|
|
&:nth-child(2n) {
|
|
margin: 0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 #2282ff;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|