532 lines
17 KiB
Vue
532 lines
17 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 { useStore } from 'store/main'
|
||
import { getHotList } from 'http/api/equip'
|
||
const userStore = useStore()
|
||
|
||
// 获取商品分类
|
||
const getGoodsClassList = async () => {
|
||
const res = await getGoodsClassListApi()
|
||
console.log(res, '商品分类列表')
|
||
}
|
||
|
||
getGoodsClassList()
|
||
|
||
const leftNavList = [
|
||
{
|
||
name: '全部商品',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [
|
||
{ goodsName: '履带挖掘机' },
|
||
{ goodsName: '履带挖掘机' },
|
||
{ goodsName: '履带挖掘机' },
|
||
{ goodsName: '履带挖掘机' },
|
||
{ goodsName: '履带挖掘机' },
|
||
{ goodsName: '履带挖掘机' }
|
||
]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '挖掘机',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '土方机械',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '工程起重机械',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '动力设备',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '压实机械',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '路桥机械',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '混凝土机械',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: '桩工机械',
|
||
children: [
|
||
{
|
||
title: '挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '开沟机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
},
|
||
{
|
||
title: '斗轮挖掘机',
|
||
children: [{ goodsName: '履带挖掘机' }]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
|
||
const handlerGoodsDetails = () => {
|
||
console.log('去往商品详情页')
|
||
}
|
||
|
||
const detailsList = ref([
|
||
{
|
||
v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
|
||
v_content_info:
|
||
'天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
|
||
v_time: '[2023/11/28]'
|
||
},
|
||
{
|
||
v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
|
||
v_content_info:
|
||
'天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
|
||
v_time: '[2023/11/28]'
|
||
},
|
||
{
|
||
v_title: '实锤了，确实挖掘技术强！山东用挖掘机在海外市场“挖呀挖”',
|
||
v_content_info:
|
||
'天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存天眼查数据显示，截至今年4月中旬，全国存',
|
||
v_time: '[2023/11/28]'
|
||
}
|
||
])
|
||
|
||
/* 获取热搜装备 */
|
||
const getHotDeviceList = async () => {
|
||
const res = await getHotList({ pageSize: 3 })
|
||
console.log(res, '热搜装备111')
|
||
}
|
||
|
||
getHotDeviceList()
|
||
</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.title">
|
||
<span>{{ child.title }}</span>
|
||
<span>
|
||
<!-- 小类名称 -->
|
||
<a
|
||
v-for="son in child.children"
|
||
:key="son.goodsName"
|
||
@click="handlerGoodsDetails">
|
||
{{ son.goodsName }}
|
||
</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 in 4" :key="item">
|
||
<!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
|
||
<el-image
|
||
style="width: 100%"
|
||
src="https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png"
|
||
fit="cover" />
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 热搜装备 -->
|
||
<div class="hot-equip">
|
||
<span>热搜装备</span>
|
||
<a>查看更多</a>
|
||
</div>
|
||
|
||
<ul class="equip-pic">
|
||
<li @click="$router.push('equipDetail/5')" style="cursor: pointer">
|
||
<EquipCard />
|
||
</li>
|
||
<li @click="$router.push('equipDetail/5')" style="cursor: pointer">
|
||
<EquipCard />
|
||
</li>
|
||
<li @click="$router.push('equipDetail/5')" style="cursor: pointer">
|
||
<EquipCard />
|
||
</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="$router.push('/consultationDetails')"
|
||
v-for="item in detailsList"
|
||
:key="item.v_time">
|
||
<div class="consult-title">
|
||
<h2>{{ item.v_title }}</h2>
|
||
<span>{{ item.v_time }}</span>
|
||
</div>
|
||
|
||
<div class="consult-info">
|
||
{{ item.v_content_info }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
.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 {
|
||
height: 160px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
li {
|
||
width: 340px;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
|
||
.consult-box {
|
||
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: 40px;
|
||
line-height: 40px;
|
||
border-bottom: 1px dashed #979797;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|