sgxt_web/src/components/SwitchSysDialog.vue

<!--
 * @Date: 2025-08-06 14:49:49
 * @Description: 系统切换窗口
-->
<template>
  <el-dialog
    v-model="model"
    class="switch-sys-dialog"
    modal-class="switch-sys-dialog-modal"
    :show-close="false"
    width="1600"
    align-center
    append-to-body
    destroy-on-close
    custom-class="switch-sys-dialog-modal"
  >
    <div class="switch-sys-dialog__content">
      <div class="nav prev" @click="prev">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
      </div>
      <div class="carousel">
        <div
          :class="['card-item', { active: currentIndex === index }]"
          v-for="(item, index) in list"
          :key="item.value"
          :style="getCardStyle(index)"
          @click="goPage(item, index)"
        >
          <img :src="item.icon" class="card-item__img" />
          <div class="card-item__label">{{ item.label }}</div>
        </div>
      </div>
      <div class="nav next" @click="next">
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
// 引入的本地图片
import fk from '@/assets/images/fk.png'
import ty from '@/assets/images/ty.png'
import pcs from '@/assets/images/pcs.png'
// 控制弹框显示或者隐藏
// const model = defineModel({ type: Boolean, default: false })
const props = defineProps({
  model: {
    type:Boolean,
    default:false
  }
})
const emit=defineEmits(['update:model'])
const list = [
  { label: '俯瞰系统', value: 1, url: `https://tyyy.lz.dsj.xz/overlooking/home`, icon: fk },
  { label: '统一门户', value: 2, url: 'https://tyyy.lz.dsj.xz/portal/home', icon: ty },
  { label: '智慧派出所', value: 3, url: 'https://pcs.lz.dsj.xz:9020/index.html', icon: pcs },
]

const currentIndex = ref(1)

const prev = () => {
  currentIndex.value = (currentIndex.value - 1 + list.length) % list.length
}
const next = () => {
  currentIndex.value = (currentIndex.value + 1) % list.length
}

const getCardStyle = index => {
  const total = list.length
  const offset = index - currentIndex.value

  let style = {
    opacity: 1,
    zIndex: 1,
    transform: '',
    left: '50%',
  }

  // 循环时计算偏移
  let relativeOffset = offset
  if (offset < -1) relativeOffset += total
  if (offset > 1) relativeOffset -= total

  if (relativeOffset === 0) {
    // 中间
    style.zIndex = 3
    style.transform = 'translateX(0) translateY(-50%) scale(1) rotateY(0deg) translateX(-50%)'
  } else if (relativeOffset === -1) {
    // 左边
    style.zIndex = 2
    style.transform = 'translateX(-500px) translateY(-50%) scale(0.8) rotateY(25deg) translateX(-50%)'
  } else if (relativeOffset === 1) {
    // 右边
    style.zIndex = 2
    style.transform = 'translateX(360px) translateY(-50%) scale(0.8) rotateY(-25deg) translateX(-50%)'
  } else {
    style.opacity = 0
    style.transform = 'translate(-50%, -50%) scale(0.5)'
  }

  return style
}

const goPage = (item, index) => {
  if (index === currentIndex.value) {
    if (item.url) {
      window.open(item.url, '_blank')
    }
  }
}
</script>

<style lang="scss">
.switch-sys-dialog {
  --el-bg-color: transparent;
  --el-box-shadow: none;
}
.switch-sys-dialog-modal {
 background-color: #ffffff00 ;
}

</style>
<style lang="scss" scoped>
.switch-sys-dialog {
  &__content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    width: inherit;
    height: 335px;
    align-items: center;

    .carousel {
      position: relative;
      width: 100%;
      height: 100%;

      .card-item {
        position: absolute;
        top: 50%;
        transition: all 0.5s ease;
        transform-origin: center center;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        user-select: none;
        cursor: pointer;

        &.active {
          box-shadow: 0 0 80px 50px rgba(var(--text-color-black-rgb), 0.6);
          .card-item__label {
            padding: 5px 0;
            color: var(--theme-text-color);
            font-weight: bold;
          }
        }

        &__img {
          width: 520px;
          height: 293px;
          object-fit: cover;
        }

        &__label {
          background-color: #ffffff;
          text-align: center;
          color: var(--text-color-black);
          transition: all 0.5s ease;
        }
      }
    }

    .nav {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      color: var(--text-color);
      cursor: pointer;
    }
  }
}
.iframe-container {
  ::v-deep .el-dialog__header {
    background-color: rgb(4 35 74) !important;
    height: 50px;
    padding: 0 !important;
  }

  ::v-deep .el-dialog__body {
    padding: 0 !important;
  }


}
</style>