GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 工作台页面布局

Browse Source
This commit is contained in:
Soybean 2021-10-25 11:56:17 +08:00
parent d246450dfe
commit 4c85569b76
5 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/custom/ShadowCard/index.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div class="bg-light dark:bg-dark rounded-16px">
<slot></slot>
</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

3
src/components/custom/index.ts
View File

@ -2,5 +2,6 @@ import CountTo from './CountTo/index.vue';
import IconClose from './IconClose/index.vue';
import ButtonTab from './ButtonTab/index.vue';
import ChromeTab from './ChromeTab/index.vue';
import ShadowCard from './ShadowCard/index.vue';
export { CountTo, IconClose, ButtonTab, ChromeTab };
export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard };

2
src/components/index.ts
View File

@ -1,2 +1,2 @@
export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer } from './common';
export { CountTo, IconClose, ButtonTab, ChromeTab } from './custom';
export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard } from './custom';

2
src/layouts/BasicLayout/components/GlobalContent/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="flex-1 flex-col-stretch p-10px bg-[#F6F9F8] dark:bg-black"
class="flex-1 flex-col-stretch p-16px bg-[#F6F9F8] dark:bg-black"
:class="{ 'overflow-hidden': routeProps.fullPage }"
>
<router-view v-slot="{ Component, route }">

33
src/views/dashboard/workbench/index.vue
View File

@ -1,15 +1,32 @@
<template>
<div class="p-6px">
<div class="flex justify-between h-360px">
<div class="flex-1 min-w-360px h-full bg-white dark:bg-dark rounded-16px"></div>
<div class="w-16px"></div>
<div class="w-360px h-full bg-white dark:bg-dark rounded-16px"></div>
</div>
</div>
<n-space :vertical="true" :size="16">
<n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
<n-grid-item span="s:24 m:16">
<shadow-card class="h-360px"></shadow-card>
</n-grid-item>
<n-grid-item span="s:24 m:8">
<shadow-card class="h-360px"></shadow-card>
</n-grid-item>
</n-grid>
<n-grid cols="s:2 m:4" responsive="screen" :x-gap="16" :y-gap="16">
<n-grid-item v-for="i in 4" :key="i">
<shadow-card class="h-100px"></shadow-card>
</n-grid-item>
</n-grid>
<n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
<n-grid-item span="s:24 m:8">
<shadow-card class="h-360px"></shadow-card>
</n-grid-item>
<n-grid-item span="s:24 m:16">
<shadow-card class="h-360px"></shadow-card>
</n-grid-item>
</n-grid>
</n-space>
</template>
<script lang="ts" setup>
// import { ref } from 'vue';
import { NSpace, NGrid, NGridItem } from 'naive-ui';
import { ShadowCard } from '@/components';
// import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
</script>
<style scoped></style>