<template> <div class="box"> <el-image class="return-button" :src="require_('@/assets/img/list_return_button.png')" fit="cover" @click="act_return"></el-image> <el-row class="box-content"> <el-col :span="18" :offset="3" style="height: 100%;"> <el-scrollbar> <el-row v-for="item in bookPromoteDataList" :key="item.id"> <el-col :span="23"> <span class="title" @click="act_showArticle(item)"> {{ item.title }} </span> </el-col> </el-row> </el-scrollbar> </el-col> </el-row> <el-dialog v-model="g_dialogTableVisible" width="80%" style="background-color: #e6e6e6;"> <el-image style="width: 100%; height: auto; padding-bottom: 1vh;" v-for="(article, aindex) in g_articlePath" :key="aindex" :src="article" fit="contain" /> </el-dialog> </div> </template> <script setup> /************************************************ * 引入文件 * ************************************************/ import { ref, onMounted } from "vue"; import { useRouter, useRoute } from "vue-router"; import { require_ } from "@/utils/require"; import { getBooksDataList } from "@/http/pages/library"; /************************************************ * 全局变量 * * 格式: g_ + 事件名 例如: g_route ************************************************/ const g_useRouter = useRouter(); // 介绍框 const g_dialogTableVisible = ref(false); // 介绍框高度 const g_introductionHeight = ref(`${window.innerHeight * 0.6}px`); // 书本数据 const bookPromoteDataList = ref([]); // 文章路径 const g_articlePath = ref([]); /************************************************ * 生命周期函数 ************************************************/ onMounted(() => { get_dataList(); }) /************************************************ * 事件处理 * * 格式: act_ + 事件名 例如: act_resolvingIdentity ************************************************/ // 返回 const act_return = () => { g_useRouter.go(-1); } /** * 显示文章 */ const act_showArticle = (item) => { g_introductionHeight.value = window.innerHeight * 0.7 + 'px'; g_articlePath.value = item.path; g_dialogTableVisible.value = true; } /************************************************ * 获取数据 * * 格式: get_ + 事件名 例如: get_dataList ************************************************/ // 获取数据 const get_dataList = async () => { const params = { company_app_id: "3", data_type: "6" }; const dataList = await getBooksDataList(params); if (dataList.code == 200) { dataList.data.forEach((item, index) => { const tempFilePath = `https://seaelibrary.xmu.edu.cn/prod-api${item.path}`; const filePathArray = [tempFilePath]; if (item.count > 1) { let temp = tempFilePath.substring(0, tempFilePath.length - 6); for (let j = 1; j < item.count; j++) { if (j < 10) { filePathArray.push(temp + '0' + j + '.png'); } else { filePathArray.push(temp + j + '.png'); } } } item.path = [...new Set(filePathArray)]; }) bookPromoteDataList.value = dataList.data } } </script> <style scoped> .box { background-image: url("@/assets/img/list.png"); background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%; } .box-content { height: 100%; padding: 11vh 0; } .title { font-size: 2rem; line-height: 4.5rem; font-weight: bold; color: #421205; margin-left: 30px; border-bottom: 2px solid rgba(66, 18, 5, 0.5); letter-spacing: 0.25rem; cursor: pointer; } .title::before { content: ''; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); visibility: hidden; width: 50px; height: 50px; background-image: url("@/assets/img/selected.png"); background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; transition: all .3s; } .title:hover::before { visibility: visible; opacity: 1; transition: all 0.3s; } .return-button { visibility: visible; position: absolute; top: 8px; right: 0; background-repeat: no-repeat; background-size: cover; background-position: center; min-width: 80px; width: 8vw; z-index: 100; } @media screen and (max-width: 1200px) { .title { font-size: 1rem; line-height: 2.5rem; } } @media screen and (orientation: portrait) { .return-button { width: 16vw; } } </style>