xmg_client/src/pages/home/index.vue

<template>
    <div class="box" :style="g_imgUrl">
        <el-button color="#7a3e2a" @click="act_backToGround" class="return-button">返回展厅</el-button>
        <img class="start-button" src="@/assets/img/reading_button.png" @click="act_redirectTo">
    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { require_ } from "@/utils/require";


/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: g_route
 ************************************************/
const g_route = useRoute();
const g_useRouter = useRouter();
// 首页标识
const g_homePage = ref("");
// 背景图地址
const g_imgUrl = ref('');
// 返回展厅地址
const g_exhibitionHallAddress = ref('');
// 首页标识映射
const g_homePageMap = {
    // 南洋资料译丛
    information: {
        bgImgUrl: require_("@/assets/img/nan_yang_information.jpg"),
        path: "/information",
        //一期：https://www.720yun.com/vr/e71jOOeOzv1
        //二期：https://www.720yun.com/vr/d14jtsevsa0
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065722"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 书目中的东南亚与华侨华人
    library: {
        bgImgUrl: require_("@/assets/img/forth_background.jpg"),
        path: "/library",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065722"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 南洋问题研究
    question: {
        bgImgUrl: require_("@/assets/img/nan_yang_question_research.jpg"),
        path: "/question",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065722"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 南洋真人馆沙龙
    reading: {
        bgImgUrl: require_("@/assets/img/reading.jpg"),
        path: "/reading",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065722"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // archivesUnbound
    archivesUnbound: {
        bgImgUrl: require_("@/assets/img/archivesUnbound.png"),
        path: "/archivesUnbound",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065729"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 博雅集3-1东南亚重要参考文献汇编
    literature: {
        bgImgUrl: require_("@/assets/img/东南亚重要参考文献汇编.png"),
        path: "/literature",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065729"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 博雅集3-3.1南洋资讯检索
    consultation: {
        bgImgUrl: require_("@/assets/img/南洋真人馆沙龙.png"),
        path: "/consultation",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065728"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 博雅集3-3.2东南亚经济统计
    economy: {
        bgImgUrl: require_("@/assets/img/东南亚经济统计.png"),
        path: "/economy",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065728"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 博雅集2-1东南亚大型特藏
    specialCollection: {
        bgImgUrl: require_("@/assets/img/东南亚大型特藏.png"),
        path: "/specialCollection",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065726"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 博雅集2-2东南亚连续出版物
    publication: {
        bgImgUrl: require_("@/assets/img/东南亚连续出版物.png"),
        path: "/publication",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065726"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 博雅集1 东南亚研究机构
    institution: {
        bgImgUrl: require_("@/assets/img/东南亚研究机构.png"),
        path: "/institution",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065726"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 东南亚地区发展报告
    regionDevelop: {
        bgImgUrl: require_("@/assets/img/东南亚地区发展报告.png"),
        path: "/regionDevelop",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065726"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 期刊检索功能
    periodicals: {
        bgImgUrl: require_("@/assets/img/study.png"),
        path: "/periodicals",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065722"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 研究检索功能
    study: {
        bgImgUrl: require_("@/assets/img/书目中的东南亚与华侨华人.png"),
        path: "/study",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065722"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
    // 论文检索功能
    thesis: {
        bgImgUrl: require_("@/assets/img/thesis.png"),
        path: "/thesis",
        //exhibitionHallAddress: "https://www.720yun.com/vr/faej5peuOw2?s=18065722"
        exhibitionHallAddress: "https://seaelibrary.xmu.edu.cn/mainplus/index.html"
    },
}


/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {
    act_resolvingIdentity();
    act_upBgImg();
    act_upExhibitionHallAddress();
});


/************************************************
 * 事件处理
 *
 * 格式: act_ + 事件名     例如: act_resolvingIdentity
 ************************************************/
// 解析首页标识
const act_resolvingIdentity = () => {
    g_homePage.value = g_route.query.type;
    if (!g_homePage.value) {
        g_homePage.value = "information";
        g_useRouter.push({ path: "/home", query: { type: "information" } })
    }
}

// 修改背景图
const act_upBgImg = () => {
    const imgUrl = g_homePageMap[g_homePage.value].bgImgUrl;
    if (imgUrl) {
        g_imgUrl.value = `background-image:url('${imgUrl}')`;
    }
}

// 修改展厅地址
const act_upExhibitionHallAddress = () => {
    const exhibitionHallAddress = g_homePageMap[g_homePage.value].exhibitionHallAddress;
    if (exhibitionHallAddress) {
        g_exhibitionHallAddress.value = exhibitionHallAddress;
    }
}


// 返回展厅
const act_backToGround = () => {
    window.location.href = g_exhibitionHallAddress.value;
}

// 点击进入内容页面
const act_redirectTo = () => {
    const path = g_homePageMap[g_homePage.value].path;
    if (path) {
        g_useRouter.push({ path });
    }
}
</script>

<style scoped>
.box {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.return-button {
    visibility: visible;
    position: absolute;
    top: 1%;
    right: 1%;
    z-index: 100;
}

.start-button {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    min-width: 300px;
    width: calc(8vw + 8vh + 20vmin);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.start-button:hover {
    transform: translate(-50%, -50%) scale(0.9);
    transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}
</style>