lcw
This commit is contained in:
201
src/components/SwitchSysDialog.vue
Normal file
201
src/components/SwitchSysDialog.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<!--
|
||||
* @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>
|
||||
Reference in New Issue
Block a user