js自定义滑块

QQ录屏20231218205943

<template>
  <a-layout class="layout">
    <a-layout-content class="main-container">
      <div class="content2">
        <div class="test">
          <div
            class="cardChil"
            v-for="(item, index) in cardList"
            :key="index"
            @mouseenter="hover(index)"
            @mouseleave="leave(index)"
            :style="{
              background: item.color,
              zIndex: 100 - index,
              top: index % 2 !== 0 ? '20px' : '0px',
            }"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div></div>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
let count = 0;
const hover = (index: number) => {
  if (count < index) {
    console.log('big');
  } else {
    console.log('small');
  }
  let dom = document.querySelectorAll('.cardChil');
  dom[index].style.zIndex = 100;
  let faDom = document.querySelector('.test');
  if (faDom) {
    faDom.style.marginLeft = -100 * index + 'px';
    // if (index == 0) {
    //   faDom.style.marginLeft = '0px';
    // } else if (index == 1) {
    //   faDom.style.marginLeft = '-100px';
    // } else if (index == 2) {
    //   faDom.style.marginLeft = '-200px';
    // } else if (index == 3) {
    //   faDom.style.marginLeft = '-300px';
    // } else if (index == 4) {
    //   faDom.style.marginLeft = '-400px';
    // } else if (index == 5) {
    //   faDom.style.marginLeft = '-500px';
    // }
  }
};
const leave = (index: number) => {
  count = index;
  let dom = document.querySelectorAll('.cardChil');
  dom[index].style.zIndex = 100 - index;
  let faDom = document.querySelector('.test');
  // faDom.style.width = '100%';
  faDom.style.marginLeft = '0%';
};
const cardList = [
  { title: '1', color: 'red' },
  { title: '2', color: 'green' },
  { title: '3', color: 'pink' },
  { title: '4', color: 'orange' },
  { title: '5', color: 'blue' },
  { title: '6', color: 'black' },
];
</script>

<style lang="less" scoped>
.test {
  width: 120%;
  width: 1890px;
  height: 400px;
  border: 1px solid red;
  display: flex;
  transition: all 1s;
  .cardChil {
    flex: 1;
    text-align: center;
    margin-left: -50px;
    position: relative;
    // left: -6px;
    &:nth-child(1) {
      margin-left: 0px;
    }
  }
}

.layout {
  min-width: 1400px;
  min-height: 100vh;
}

.main-container {
  flex-direction: row;
  padding: 19px 70px;
  background-color: @bg-color;

  .content2 {
    margin-top: 20px;
    overflow: hidden;
    width: 100%;
    height: 80vh;
    border: 1px solid #999;
    background-color: #f0f7fe;
  }
}
</style>