<script setup lang="ts">
|
import { ref } from "vue";
|
import { RouterView } from "vue-router";
|
import ScaleScreen from "@/components/scale-screen";
|
import Headers from "./header.vue";
|
import Setting from "./setting.vue";
|
import { useSettingStore } from "@/stores/index";
|
import { storeToRefs } from "pinia";
|
import MessageContent from "@/components/Plugins/MessageContent";
|
|
const settingStore = useSettingStore();
|
const { isScale } = storeToRefs(settingStore);
|
const wrapperStyle = {};
|
</script>
|
|
<template>
|
<scale-screen
|
width="3840"
|
height="1080"
|
:delay="500"
|
:fullScreen="false"
|
:boxStyle="{
|
background: '#03050C',
|
overflow: isScale ? 'hidden' : 'auto',
|
}"
|
:wrapperStyle="wrapperStyle"
|
:autoScale="isScale"
|
>
|
<div class="content_wrap">
|
<Headers />
|
<RouterView />
|
<MessageContent />
|
<div class="d-bottom">
|
|
</div>
|
</div>
|
</scale-screen>
|
<Setting />
|
</template>
|
<style lang="scss" scoped>
|
.content_wrap {
|
width: 100%;
|
height: 100%;
|
//padding: 16px 16px 16px 16px;
|
box-sizing: border-box;
|
background-image: url("@/assets/img/pageBg1.png");
|
background-size: cover;
|
background-position: center center;
|
}
|
.d-bottom{
|
position: relative;
|
//width: 120px;
|
bottom: 140px;
|
height: 80px;
|
background-image: url("@/assets/img/bottombg.png");
|
background-size: cover;
|
background-position: center center;
|
margin-bottom: 4px;
|
}
|
</style>
|
