Zlpt_Portal/src/views/home/index.vue

<script setup lang="ts">

</script>

<template>
    <!-- 首页 -->
    <div class="home-index wapper">
        <div class="home-goods">
            <ul class="left-nav">
                <li>全部商品</li>
                <li>挖掘机械</li>
                <li>土方机械</li>
                <li>工程起重机械</li>
                <li>动力设备</li>
                <li>压实机械</li>
                <li>路桥机械</li>
                <li>混凝土机械</li>
                <li>桩工机械</li>
            </ul>
            <div class="right-content">
                <ul class="nva-items">
                    <li>首页</li>
                    <li>自选直租</li>
                    <li>寻源比价</li>
                    <li>二手交易</li>
                    <li>保险业务</li>
                    <li>检验业务</li>
                    <li>企业专区</li>
                </ul>
                <div class="swpier-img">
                    <el-carousel :interval="5000" arrow="always">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <h3 text="2xl" justify="center">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.home-index {
    background-color: #fff;
    padding: 10px 15px;

    .home-goods {
        height: 500px;
        display: flex;

        .left-nav {
            width: 200px;
            height: 100%;
            display: flex;
            background-color: #f7f9fa;
            flex-direction: column;
            justify-content: space-around;

            li {
                width: 100%;
                text-align: left;
                padding-left: 50px;
                color: #8B8B8B;

                &:hover {
                    cursor: pointer;
                    color: #2282FF;
                    font-weight: bold;
                }

            }
        }

        .right-content {
            flex: 1;
            height: 100%;
            margin-left: 20px;


            .nva-items {
                width: 100%;
                height: 43px;
                background-color: #f7f9fa;
                border-radius: 8px;
                display: flex;
                align-items: center;
                // padding-left: 30px;

                li {
                    color: #7D7D7D;
                    padding: 0 20px;
                    border-right: 1px solid #7D7D7D;

                    &:hover {
                        cursor: pointer;
                        color: #333333;
                        font-weight: bold;
                    }

                    &:last-child {
                        border: none;
                    }
                }
            }

            .swpier-img {
                width: 100%;
                height: 437px;
                margin-top: 10px;
                border-radius: 8px;

            }
        }
    }
}
</style>