| | |
| | | <script setup lang="ts"> |
| | | import {ref} from "vue" |
| | | 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 = {}; |
| | | const autoScale = ref(false) |
| | | </script> |
| | | |
| | | <template> |
| | | <scale-screen |
| | | width="1920" |
| | | width="3840" |
| | | height="1080" |
| | | :delay="500" |
| | | :fullScreen="false" |
| | | :boxStyle="{ background: '#03050C',overflow:autoScale?'hidden':'auto' }" |
| | | :boxStyle="{ |
| | | background: '#03050C', |
| | | overflow: isScale ? 'hidden' : 'auto', |
| | | }" |
| | | :wrapperStyle="wrapperStyle" |
| | | :autoScale="autoScale" |
| | | :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; |
| | | //padding: 16px 16px 16px 16px; |
| | | box-sizing: border-box; |
| | | background-image: url("@/assets/img/pageBg.png"); |
| | | 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> |