鼠标悬停显示的轮播图

今日整理,发现这种轮播图是最难实现的一种,
1.再循环中难以控制单一品类商品显示
解决办法: 在外面的主类里面添加&:hover触发标签属性的更改,这样可以单一作用
2.在循环中触发事件,所有的同一事件都会触发
解决办法:先建立模版控制排版,再从单一内容开始微调

<script setup>
import  {useCategoryStore}  from "@/stores/category.js";
import { storeToRefs } from "pinia";
import { ref } from "vue";
const categoryStore=useCategoryStore();
const {dataList}=storeToRefs(useCategoryStore());

</script>
<template>
    
    <div v-for="item in dataList" :key="item.id" class="alll">

        <div class="items">
            <div >{{ item.name }}</div>
            <div v-for="i in item.children? item.children.slice(0,2):[]" :key="i.id">{{ i.name }} </div>
        </div>
        <div class="styples"  >
            <h4>分类推荐  根据您的购买或浏览记录推荐</h4>
            <div class="column">
                <div class="box" v-for="a in item.goods? item.goods.slice(0,9):[] " :key="a.id">
                    <dl>
                        <img  :src="a.picture" alt="">
                        <dt>
                            {{ a.name }}
                        </dt>
                        <dd>
                            {{ a.desc }}
                        </dd>
                        <dd>
                            <div>
                                {{ a.price }}
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
            
        </div>
    </div>
</template>
<style scoped lang="scss">
.alll{
    display: flex;
    .items{
    padding: 10px;
    width: 280px;
    height: 70px;
    background: #3f3d3d;
    position: relative;
    color: #c2b9b9;
    display: flex;
    align-items: center;
    justify-content:space-between;
    position: relative;
    left: 350px;
    font-size: 20px;
    &:hover {
        background: $xtxColor;
      }
    // // flex-direction: column;
    // div{
    //     // width: 100px;
    // }
    
}
&:hover{
    .styples{
        display: flow;
    }
}
    // flex-direction: column;
}
.column{
    display: flex;
    column-count: 3;
    flex-wrap: wrap;
    
    // width: calc(100% / 3);
    .box{
        // display: flex;
        break-inside: avoid;
        padding: 10px;
        width: 240px;
        border: 1px  solid #3f3d3d;
    }
}

.styples{

    width: 720px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 650px;
    top: 0px;
    display: none;
    h4{
        height: 40px;
        justify-content: center;
    align-items: center;
    display: flex;

    }
}
// .open{
//     display: flex;
// }
dl{
    img{
        height: 100px;
    }
}
</style>