traffic-laser/src/components/fill-slide/index.vue

<template>
  <div class="fill-slide">
    <div></div>
    <div class="header">
      <slot name="header" />
      <ui-icon class="close" type="close" @click="clickHandler" ctrl />
    </div>
    <div class="slide-layout">
      <ui-slide
          :items="data"
          :current-index="data.indexOf(active)"
          @change="index => $emit('update:active', data[index])"
      >
        <template v-slot="{raw}">
          <template v-if="$slots.default">
            <slot :data="raw" />
          </template>
          <img :src="getStaticFile(getURL ? getURL(raw) : raw.url)" class="image" v-else />
        </template>
      </ui-slide>
    </div>
    <div class="foot">
      <slot name="foot" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import UiSlide from "@/components/base/components/slide/index.vue";
import {getStaticFile} from "@/dbo/main";
import UiIcon from "@/components/base/components/icon/index.vue";

type Item = {url: string}

defineProps<{ data: Item[], active: Item, getURL?: (data: any) => string }>()
const emit = defineEmits<{
  (e: 'update:active', d: Item): void,
  (e: 'quit'): void
}>()

const clickHandler = () => {
  emit('quit')
}
</script>

<style scoped lang="scss">
.fill-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.slide-layout {
  max-width: 90vw;
  width: 840px;
  height: 540px;
  position: relative;
  z-index: 1;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.header {
  width: 100%;
  position: absolute;
  z-index: 4;
  background: red;
  //height: 120px;
}

.close {
  position: absolute;
  right: 32px;
  top: 32px;
  font-size: 20px;
  color: #fff;
  z-index: 1;
}
.foot {
  width: 100%;
  padding-bottom: 24px;
}
</style>

<style lang="scss">
.fill-slide .ui-slide .ui-gate-layer {
  overflow: initial !important;
  .ui-gate-slides .ui-gate-content {
    transition: all .3s ease;
    transform: scale(0.9);
    opacity: 0.5 !important;

    &.active {
      transform: scale(1);
      opacity: 1 !important;
    }
  }
}
</style>