mky-vent-base/src/views/vent/home/configurable/components/originalNew/moduleBottom.vue

<template>
  <div v-if="visible" class="module-content">
    <div class="left-solt" @click="scrollLeft"></div>
    <div class="center-solt">
      <div v-for="(item, index) in visibleTabs" :key="index" class="tab-item" :class="{ active: activeIndex === index }" @click="selectTab(index)">
        <span class="tab-name">{{ item }}</span>
      </div>
    </div>
    <div class="right-solt" @click="scrollRight"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

defineProps<{ title: string; visible: boolean }>();
const emit = defineEmits(['close', 'click']);

const tabList = ['Tab标题名称 1', 'Tab标题名称 2', 'Tab标题名称 3', 'Tab标题名称 4', 'Tab标题名称 5', 'Tab标题名称 6'];
const activeIndex = ref(0);
const currentStart = ref(0);
const visibleCount = 4;

const visibleTabs = computed(() => {
  return tabList.slice(currentStart.value, currentStart.value + visibleCount);
});

function closeModel() {
  emit('close');
}

function clickHandler() {
  emit('click');
}

function selectTab(index: number) {
  activeIndex.value = index;
}

function scrollLeft() {
  if (currentStart.value > 0) {
    currentStart.value--;
  }
}

function scrollRight() {
  if (currentStart.value + visibleCount < tabList.length) {
    currentStart.value++;
  }
}
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.module-content {
  color: #fff;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.left-solt,
.right-solt {
  width: 15%;
  height: 60%;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.left-solt {
  background: url('@/assets/images/vent/homeNew/Bottom-left.png') no-repeat;
  background-size: 100% 100%;
}

.right-solt {
  background: url('@/assets/images/vent/homeNew/Bottom_right.png') no-repeat;
  background-size: 100% 100%;
}

.center-solt {
  display: flex;
  width: 70%;
  height: 60%;
  justify-content: space-between;
}

.tab-item {
  flex: 1;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
  background: url('@/assets/images/vent/homeNew/tab-defult.png') no-repeat;
  background-size: 100% 100%;
  transition: all 0.3s;
  margin: 0 5px;
  color: #999;
}
.tab-name {
  font-size: 14px;
  display: inline-block;
  float: right;
  margin-right: 13px;
}
.tab-item.active {
  background: url('@/assets/images/vent/homeNew/tab-active.png') no-repeat;
  background-size: 100% 100%;
  font-weight: bold;
  color: #fff;
  transform: translateY(-5px);
}

.module-slot {
  height: calc(100% - 33px);
  width: calc(100% - 15px);
  margin-left: 10px;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateY(-33px);
}
</style>