style: use unocss rewrite css
This commit is contained in:
张传龙
parent
d10b8f0e96
commit
5856f601fa
@ -9,12 +9,3 @@
|
||||
<script setup>
|
||||
import AppProvider from '@/components/common/AppProvider.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
height: 100%;
|
||||
.n-config-provider {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
|
||||
<n-config-provider wh-full :theme-overrides="themStore.naiveThemeOverrides">
|
||||
<n-loading-bar-provider>
|
||||
<n-dialog-provider>
|
||||
<n-notification-provider>
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
:class="{ overflow: isOverflow && showArrow }"
|
||||
:style="{
|
||||
transform: `translateX(${translateX}px)`,
|
||||
}">
|
||||
}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-icon mr20 size="18" style="cursor: pointer" @click="handleLinkClick">
|
||||
<n-icon mr-20 size="18" style="cursor: pointer" @click="handleLinkClick">
|
||||
<icon-mdi:github />
|
||||
</n-icon>
|
||||
</template>
|
||||
@ -9,5 +9,3 @@ function handleLinkClick() {
|
||||
window.open('https://github.com/zclzone/vue-naive-admin')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<n-icon size="20" style="cursor: pointer" @click="appStore.switchCollapsed">
|
||||
<n-icon size="20" cursor-pointer @click="appStore.switchCollapsed">
|
||||
<icon-mdi:format-indent-increase v-if="appStore.collapsed" />
|
||||
<icon-mdi:format-indent-decrease v-else />
|
||||
</n-icon>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<n-dropdown :options="options" @select="handleSelect">
|
||||
<div class="avatar">
|
||||
<img :src="userStore.avatar" />
|
||||
<div flex items-center cursor-pointer>
|
||||
<img :src="userStore.avatar" mr10 w-35 h-35 rounded-full />
|
||||
<span>{{ userStore.name }}</span>
|
||||
</div>
|
||||
</n-dropdown>
|
||||
@ -35,18 +35,3 @@ function handleSelect(key) {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="h-left">
|
||||
<header px-15 h-full flex items-center>
|
||||
<div flex items-center>
|
||||
<MenuCollapse />
|
||||
<BreadCrumb ml-15 />
|
||||
</div>
|
||||
<div class="h-right">
|
||||
<div ml-auto flex items-center>
|
||||
<GithubSite />
|
||||
<FullScreen />
|
||||
<UserAvatar />
|
||||
@ -19,21 +19,3 @@ import FullScreen from './components/FullScreen.vue'
|
||||
import UserAvatar from './components/UserAvatar.vue'
|
||||
import GithubSite from './components/GithubSite.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
padding: 0 15px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.h-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.h-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
:collapsed-width="64"
|
||||
:options="menuOptions"
|
||||
:value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
|
||||
@update:value="handleMenuSelect" />
|
||||
@update:value="handleMenuSelect"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@ -6,7 +6,8 @@
|
||||
:y="y"
|
||||
placement="bottom-start"
|
||||
@clickoutside="handleHideDropdown"
|
||||
@select="handleSelect" />
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@ -3,11 +3,13 @@
|
||||
<n-tag
|
||||
v-for="tag in tagsStore.tags"
|
||||
:key="tag.path"
|
||||
class="px-15 mx-5 cursor-pointer hover:color-primary"
|
||||
:type="tagsStore.activeTag === tag.path ? 'primary' : 'default'"
|
||||
:closable="tagsStore.tags.length > 1"
|
||||
@click="handleTagClick(tag.path)"
|
||||
@close.stop="tagsStore.removeTag(tag.path)"
|
||||
@contextmenu.prevent="handleContextMenu($event, tag)">
|
||||
@contextmenu.prevent="handleContextMenu($event, tag)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
</n-tag>
|
||||
</ScrollX>
|
||||
@ -16,7 +18,8 @@
|
||||
v-model:show="contextMenuOption.show"
|
||||
:current-path="contextMenuOption.currentPath"
|
||||
:x="contextMenuOption.x"
|
||||
:y="contextMenuOption.y" />
|
||||
:y="contextMenuOption.y"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup name="Tags">
|
||||
@ -73,11 +76,7 @@ async function handleContextMenu(e, tagItem) {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.n-tag {
|
||||
padding: 0 15px;
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
.n-tag__close {
|
||||
.n-tag__close {
|
||||
margin-left: 5px;
|
||||
box-sizing: content-box;
|
||||
font-size: 12px;
|
||||
@ -88,9 +87,5 @@ async function handleContextMenu(e, tagItem) {
|
||||
color: #fff;
|
||||
background-color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--primaryColor);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,29 @@
|
||||
<template>
|
||||
<n-layout has-sider style="height: 100%">
|
||||
<n-layout has-sider h-full>
|
||||
<n-layout-sider
|
||||
bordered
|
||||
collapse-mode="width"
|
||||
:collapsed-width="64"
|
||||
:width="220"
|
||||
:native-scrollbar="false"
|
||||
:collapsed="appStore.collapsed">
|
||||
:collapsed="appStore.collapsed"
|
||||
>
|
||||
<SideBar />
|
||||
</n-layout-sider>
|
||||
<n-layout>
|
||||
<n-layout-header :style="{ height: useTheme.header.height + 'px' }">
|
||||
<n-layout-header bg-white border-b bc-eee :style="`height: ${useTheme.header.height ?? 60}px`">
|
||||
<AppHeader />
|
||||
</n-layout-header>
|
||||
|
||||
<n-layout style="background-color: #f5f6fb" :style="`height: calc(100% - ${useTheme.header.height}px)`">
|
||||
<n-layout bg="#f5f6fb" :style="`height: calc(100% - ${useTheme.header.height ?? 60}px)`">
|
||||
<AppTags v-if="useTheme.tags.visible" />
|
||||
<AppMain
|
||||
class="cur-scroll border-t bc-eee"
|
||||
:style="{
|
||||
height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height : 0}px)`,
|
||||
height: `calc(100% - ${useTheme.tags.visible ? useTheme.tags.height ?? 50 : 0}px)`,
|
||||
overflow: 'auto',
|
||||
}" />
|
||||
}"
|
||||
/>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
</n-layout>
|
||||
@ -38,11 +40,3 @@ import { useAppStore } from '@/store/modules/app'
|
||||
const useTheme = useThemeStore()
|
||||
const appStore = useAppStore()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.n-layout-header {
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,6 +11,11 @@ body {
|
||||
font-family: 'Encode Sans Condensed', sans-serif;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* router view transition fade-slide */
|
||||
.fade-slide-leave-active,
|
||||
.fade-slide-enter-active {
|
||||
|
||||
@ -36,7 +36,8 @@
|
||||
class="w-300 flex-shrink-0 mt-10 mb-10 cursor-pointer"
|
||||
hover:card-shadow
|
||||
title="Vue Naive Admin"
|
||||
size="small">
|
||||
size="small"
|
||||
>
|
||||
<p op-60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
|
||||
</n-card>
|
||||
<div w-300 h-0></div>
|
||||
|
||||
@ -5,7 +5,8 @@
|
||||
v-model="post.title"
|
||||
class="flex-1 pt-15 pb-15 mr-20 text-20 font-bold color-primary"
|
||||
type="text"
|
||||
placeholder="输入文章标题..." />
|
||||
placeholder="输入文章标题..."
|
||||
/>
|
||||
<n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
|
||||
</div>
|
||||
<MdEditor v-model="post.content" style="height: calc(100vh - 220px)" />
|
||||
|
||||
@ -11,7 +11,8 @@
|
||||
:columns="columns"
|
||||
:pagination="pagination"
|
||||
:row-key="(row) => row.id"
|
||||
@update:checked-row-keys="handleCheck" />
|
||||
@update:checked-row-keys="handleCheck"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
autofocus
|
||||
class="text-16 items-center h-50 pl-10"
|
||||
placeholder="admin"
|
||||
:maxlength="20">
|
||||
:maxlength="20"
|
||||
>
|
||||
</n-input>
|
||||
</div>
|
||||
<div mt-30 w-full max-w-360>
|
||||
@ -27,7 +28,8 @@
|
||||
show-password-on="mousedown"
|
||||
placeholder="123456"
|
||||
:maxlength="20"
|
||||
@keydown.enter="handleLogin" />
|
||||
@keydown.enter="handleLogin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div mt-20 w-full max-w-360>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user