77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<script setup>
|
||
import customHeader from "@/components/customHeader/index.vue";
|
||
import customFooter from "@/components/customFooter/index.vue";
|
||
import { NScrollbar } from "naive-ui";
|
||
import { computed } from "vue";
|
||
import { useRoute } from "vue-router";
|
||
|
||
const route = useRoute();
|
||
function resolveAssetUrl(possiblePath) {
|
||
try {
|
||
if (possiblePath.startsWith("@/")) {
|
||
return new URL(possiblePath.replace("@/", "/src/"), import.meta.url).href;
|
||
}
|
||
if (possiblePath.startsWith("/src/")) {
|
||
return new URL(possiblePath, import.meta.url).href;
|
||
}
|
||
return possiblePath;
|
||
} catch (e) {
|
||
return possiblePath;
|
||
}
|
||
}
|
||
|
||
const defaultBgUrl = resolveAssetUrl("@/assets/image/bg-pc.png");
|
||
|
||
const currentBg = computed(() => {
|
||
// 支持三种：
|
||
// 1) 'url("@/xxx.png") ...' → 解析成真实 URL 并仅设置 backgroundImage，由类控制 cover/center/no-repeat
|
||
// 2) '@/xxx.png' 或 '/src/xxx.png' → 按图片处理
|
||
// 3) 纯色 '#xxxxxx' 或 'rgb(...)' → 作为背景色
|
||
const metaBg = route.meta?.bg;
|
||
if (!metaBg) return { backgroundImage: `url(${defaultBgUrl})` };
|
||
const value = String(metaBg).trim();
|
||
if (value.startsWith("#") || value.startsWith("rgb")) {
|
||
return { backgroundColor: value };
|
||
}
|
||
// 匹配 url("...") 或 url('...') 或 url(...)
|
||
const urlMatch = value.match(/url\(([^)]+)\)/i);
|
||
if (urlMatch) {
|
||
const rawPath = urlMatch[1].replace(/^['\"]|['\"]$/g, "");
|
||
const resolved = resolveAssetUrl(rawPath);
|
||
return { backgroundImage: `url(${resolved})` };
|
||
}
|
||
// 直接给出资源路径的情况
|
||
if (
|
||
value.endsWith(".png") ||
|
||
value.endsWith(".jpg") ||
|
||
value.endsWith(".jpeg") ||
|
||
value.endsWith(".webp") ||
|
||
value.endsWith(".gif") ||
|
||
value.endsWith(".svg")
|
||
) {
|
||
const resolved = resolveAssetUrl(value);
|
||
return { backgroundImage: `url(${resolved})` };
|
||
}
|
||
// 兜底：当作颜色或直接背景
|
||
return { background: value };
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col h-screen">
|
||
<customHeader></customHeader>
|
||
<n-scrollbar
|
||
class="bg-cover bg-center bg-no-repeat flex-1"
|
||
style="background-size: 100% 100%; background-attachment: fixed"
|
||
:style="currentBg"
|
||
>
|
||
<div>
|
||
<router-view />
|
||
</div>
|
||
</n-scrollbar>
|
||
<customFooter></customFooter>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss"></style>
|