调整默认语言,调整横竖屏布局

This commit is contained in:
fangxiang 2021-08-09 11:45:38 +08:00
parent f4a4bf8e8d
commit e64ac15462
3 changed files with 44 additions and 6 deletions

View File

@ -77,7 +77,7 @@ module.exports = configure(function (ctx) {
config: {},
// iconSet: 'material-icons', // Quasar icon set
// lang: 'en-US', // Quasar language pack
lang: "zh-CN", // Quasar language pack
// For special cases outside of where the auto-import strategy can have an impact
// (like functional components as one of the examples),

View File

@ -1,18 +1,37 @@
<template>
<q-layout view="hHh lpR fFf">
<!-- header -->
<q-header elevated class="header text-black">
<top-tool-bar />
</q-header>
<q-drawer v-model="data.show_left_drawer" side="left" bordered>
<!-- drawer -->
<q-drawer
v-if="landspace"
v-model="data.show_left_drawer"
side="left"
bordered
>
<left-tool-bar />
</q-drawer>
<!-- page -->
<q-page-container>
<router-view />
</q-page-container>
<q-footer elevated class="bg-white text-black" style="height: 30px">
<!-- fotter -->
<q-footer
elevated
v-if="landspace"
class="bg-white text-black"
style="height: 28px"
>
<div class="text-center">SX</div>
</q-footer>
<q-footer v-else elevated class="bg-white text-black" style="height: 40vh">
<left-tool-bar />
</q-footer>
</q-layout>
</template>
@ -21,6 +40,7 @@ import { defineComponent, reactive } from "vue";
import LeftToolBar from "src/pages/LeftToolBar.vue";
import TopToolBar from "src/pages/TopToolBar.vue";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
class _Data {
show_left_drawer = true;
@ -35,7 +55,16 @@ export default defineComponent({
setup() {
const data = reactive(new _Data());
return { data };
const landspace = window.innerHeight < window.innerWidth;
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
const new_landspace = window.innerHeight < window.innerWidth;
if (landspace != new_landspace) {
window.location.reload();
}
});
return { data, landspace };
},
});
</script>

View File

@ -2,7 +2,7 @@
<q-layout view="hHh lpR fFf">
<q-page-container>
<q-page class="row items-center justify-evenly">
<q-card style="width: 30vw">
<q-card :style="{ width: (landspace ? 30 : 70) + 'vw' }">
<q-card-section class="text-center text-h6">
{{ $t("login") }}
</q-card-section>
@ -99,7 +99,7 @@
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import { defineComponent, reactive, ref } from "vue";
import GlobalData from "src/common/GlobalData";
import { LocalStorage, SessionStorage, useQuasar } from "quasar";
@ -107,6 +107,7 @@ import ClientConnection from "src/common/ClientConnection";
import PermissionLevel from "src/entities/PermissionLevel";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
class _Data {
user_name: string | null = null;
@ -146,8 +147,16 @@ export default defineComponent({
const $route = useRouter();
const data = reactive(new _Data());
let web_socket: ClientConnection | null = null;
const landspace = ref(window.innerHeight < window.innerWidth);
EventBus.getInstance().on(EventNamesDefine.WindowResize, () => {
landspace.value = window.innerHeight < window.innerWidth;
});
return {
data,
landspace,
loga(a: any) {
console.log(a);
},