<template>
|
<div :class="{ GatewayPage: true, 'narrowScreen': narrowScreen }">
|
<div class="gateway-page">
|
<div class="logo" v-if="isShowAiSkyLogo">
|
<img src="@/assets/images/login/aisky-logo.png" alt="" />
|
</div>
|
<div class="title">{{ gateTitle }}</div>
|
<div class="en-title">{{ gateTitleEn }}</div>
|
<div class="card-warp">
|
<div
|
class="card"
|
v-for="(item, index) in cardList"
|
:key="index"
|
@mouseenter="activeIndex = index"
|
@mouseleave="activeIndex = -1"
|
>
|
<div
|
@click="activeClick(activeIndex)"
|
class="card-bg"
|
:style="{
|
background: `url(${activeIndex === index ? item.active : item.normal}) no-repeat center 100% / 100%`,
|
}"
|
:class="{
|
'hover-image': activeIndex === index,
|
}"
|
></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRouter, useRoute } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
|
import getBaseConfig from '@/buildConfig/config'
|
|
const { gateTitle, gateTitleEn, isShowAiSkyLogo, gatewayMenu } = getBaseConfig()
|
|
const router = useRouter()
|
|
// 图片数据
|
const cardList = ref([...gatewayMenu])
|
const activeIndex = ref(-1) // 当前激活的卡片索引
|
|
function activeClick(index) {
|
if (index === 0) {
|
const adminUrl = import.meta.env.VITE_APP_ADMIN_URL
|
window.location.href = `${adminUrl}wel/index`
|
}
|
if (index === 1) {
|
router.push('/index')
|
}
|
if (index === 2) {
|
const url = encodeURIComponent(window.location.href)
|
const { VITE_APP_AI_PLAT_URL } = import.meta.env
|
window.location.href = `${VITE_APP_AI_PLAT_URL}/login?autoEnter=1&formUrl=${url}`
|
// window.open(`http://localhost:8013/login?autoEnter=1&formUrl=${url}`)
|
}
|
}
|
|
const narrowScreen = ref(false)
|
const narrowScreenFun = () => {
|
// 监听窗口变化，计算是不是 窄屏幕
|
narrowScreen.value = window.innerWidth / window.innerHeight < 16 / 9
|
}
|
|
onMounted(() => {
|
narrowScreenFun()
|
window.addEventListener('resize', narrowScreenFun)
|
document.title = 'appWebview'
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.GatewayPage {
|
position: relative;
|
background: #020f25;
|
width: 100%;
|
height: 100%;
|
|
overflow-x: auto;
|
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
&::-webkit-scrollbar {
|
display: none; /* Chrome、Safari 隐藏滚动条 */
|
}
|
|
&.narrowScreen {
|
> div {
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
}
|
> div {
|
left: 0;
|
top: 0;
|
position: absolute;
|
height: 1080px;
|
width: 1920px;
|
}
|
.gateway-page {
|
background: url('@/assets/images/login/gateway-bg.png') center no-repeat;
|
background-size: 100% 100%;
|
}
|
.logo {
|
position: absolute;
|
left: 52px;
|
top: 44px;
|
img {
|
width: 156px;
|
height: 44px;
|
}
|
}
|
.title {
|
position: absolute;
|
left: 184px;
|
top: 294px;
|
width: 968px;
|
height: 110px;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: bold;
|
font-size: 60px;
|
color: #ffffff;
|
line-height: 99px;
|
letter-spacing: 5px;
|
text-align: left;
|
}
|
.en-title {
|
position: absolute;
|
left: 190px;
|
top: 396px;
|
width: 968px;
|
height: 80px;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: 600;
|
font-size: 26px;
|
color: #ffffff;
|
line-height: 72px;
|
letter-spacing: 3px;
|
text-align: left;
|
}
|
.card-warp {
|
position: absolute;
|
top: 540px;
|
left: 50%;
|
display: flex;
|
gap: 50px; /* 卡片间距 */
|
z-index: 1;
|
transform: translate(-50%, 0);
|
|
.card {
|
position: relative; /* 确保子元素绝对定位基于卡片 */
|
width: 564px;
|
height: 416px;
|
cursor: pointer;
|
|
.card-bg {
|
width: 564px;
|
height: 416px;
|
border-radius: 8px; /* 可选：圆角效果 */
|
}
|
|
.hover-image {
|
transform: scale(1.05);
|
}
|
}
|
}
|
}
|
</style>
|
