github/cosin
1
0
Fork 0
mirror of https://github.com/chatopera/cosin.git synced 2025-08-01 16:38:02 +08:00
Code Issues Releases Wiki Activity

fix: responsive layout

Browse Source 
Signed-off-by: Kaifuny <superbiger.github@gmail.com>
This commit is contained in:
Kaifuny 2023-08-03 14:46:00 +08:00
parent b1e26da9da
commit 2979be7d74
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
contact-frontend/packages/shared/ui/src/components/Nav.vue
View File

@ -44,7 +44,7 @@ defineEmits(['update:current'])
</div> </div>
<slot name="production"></slot> <slot name="production"></slot>
</div> </div>
<div class="hidden md:block"> <div class="hidden lg:block">
<div class="ml-10 flex items-baseline space-x-4"> <div class="ml-10 flex items-baseline space-x-4">
<a <a
v-for="(nav, index) in navigations" v-for="(nav, index) in navigations"
@ -60,7 +60,7 @@ defineEmits(['update:current'])
</a> </a>
</div> </div>
</div> </div>
<div class="hidden md:block"> <div class="hidden lg:block">
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<slot></slot> <slot></slot>
<!-- Profile dropdown --> <!-- Profile dropdown -->
@ -88,7 +88,7 @@ defineEmits(['update:current'])
</div> </div>
</div> </div>
</div> </div>
<div class="-mr-2 flex md:hidden"> <div class="-mr-2 flex lg:hidden">
<!-- Mobile menu button --> <!-- Mobile menu button -->
<button <button
type="button" type="button"
@ -133,7 +133,7 @@ defineEmits(['update:current'])
</div> </div>
</div> </div>
<!-- Mobile menu, show/hide based on menu state. --> <!-- Mobile menu, show/hide based on menu state. -->
<div v-show="dropdownFlag" class="md:hidden"> <div v-show="dropdownFlag" class="lg:hidden">
<div class="space-y-1 px-2 pb-3 pt-2 sm:px-3"> <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
<a <a
v-for="(nav, index) in navigations" v-for="(nav, index) in navigations"

4
contact-frontend/packages/shared/ui/src/layouts/MenusLayout.vue
View File

@ -9,6 +9,9 @@ import {
NWatermark, NWatermark,
NIcon, NIcon,
} from 'naive-ui' } from 'naive-ui'
import { useWindowSize } from '@vueuse/core'
const { width } = useWindowSize()
defineProps({ defineProps({
isWatermarkMode: { isWatermarkMode: {
@ -71,6 +74,7 @@ defineEmits(['update:collapsed'])
<slot></slot> <slot></slot>
</n-layout-sider> </n-layout-sider>
<n-layout-content <n-layout-content
:class="{ hidden: width < 600 && !collapsed }"
content-style="display: flex; flex-direction: column;width: 100%;height:100%;padding: 10px" content-style="display: flex; flex-direction: column;width: 100%;height:100%;padding: 10px"
> >
<n-page-header :subtitle="pageSubtitle"> <n-page-header :subtitle="pageSubtitle">