Zlpt_Portal/src/views/home/index.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>