@@ -24,7 +24,8 @@ const tagsViewStore = useTagsViewStore(); | |||||
/* 50= navbar 50 */ | /* 50= navbar 50 */ | ||||
min-height: calc(100vh - 50px); | min-height: calc(100vh - 50px); | ||||
overflow: hidden; | overflow: hidden; | ||||
background-color: var(--el-bg-color-page); | |||||
// background-color: var(--el-bg-color-page); | |||||
background-color: #000; | |||||
} | } | ||||
.fixed-header + .app-main { | .fixed-header + .app-main { | ||||
@@ -1,4 +1,5 @@ | |||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import { watch, ref } from "vue"; | |||||
import { storeToRefs } from "pinia"; | import { storeToRefs } from "pinia"; | ||||
import { RouteLocationRaw, useRoute, useRouter } from "vue-router"; | import { RouteLocationRaw, useRoute, useRouter } from "vue-router"; | ||||
import { useAppStore } from "@/store/modules/app"; | import { useAppStore } from "@/store/modules/app"; | ||||
@@ -49,41 +50,53 @@ function logout() { | |||||
function routerTo() { | function routerTo() { | ||||
router.push("/myAccount"); | router.push("/myAccount"); | ||||
} | } | ||||
// 当前路由的名字 | |||||
const routeName = ref(route.meta.name); | |||||
watch( | |||||
() => route.meta.name, | |||||
(newName) => { | |||||
routeName.value = newName; | |||||
} | |||||
); | |||||
</script> | </script> | ||||
<template> | <template> | ||||
<!-- 顶部导航栏 --> | <!-- 顶部导航栏 --> | ||||
<div class="navbar"> | |||||
<div class="myNavbar"> | |||||
<!-- 左侧面包屑 --> | <!-- 左侧面包屑 --> | ||||
<div class="flex"> | |||||
<div class="flex" v-if="false"> | |||||
<hamburger | <hamburger | ||||
:is-active="appStore.sidebar.opened" | :is-active="appStore.sidebar.opened" | ||||
@toggleClick="toggleSideBar" | @toggleClick="toggleSideBar" | ||||
/> | /> | ||||
<breadcrumb /> | <breadcrumb /> | ||||
</div> | </div> | ||||
<!-- 右侧导航设置 --> | <!-- 右侧导航设置 --> | ||||
<div class="flex"> | |||||
<div class="flex" v-if="false"> | |||||
<!-- 导航栏设置(窄屏隐藏)--> | <!-- 导航栏设置(窄屏隐藏)--> | ||||
<div class="setting-container" v-if="device !== 'mobile'"> | <div class="setting-container" v-if="device !== 'mobile'"> | ||||
<!--全屏 --> | <!--全屏 --> | ||||
<div class="setting-item" @click="toggle"> | |||||
<div class="setting-item" @click="toggle" v-if="false"> | |||||
<svg-icon | <svg-icon | ||||
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" | :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" | ||||
/> | /> | ||||
</div> | </div> | ||||
<!-- 布局大小 --> | <!-- 布局大小 --> | ||||
<el-tooltip content="布局大小" effect="dark" placement="bottom"> | |||||
<el-tooltip | |||||
content="布局大小" | |||||
effect="dark" | |||||
placement="bottom" | |||||
v-if="false" | |||||
> | |||||
<size-select class="setting-item" /> | <size-select class="setting-item" /> | ||||
</el-tooltip> | </el-tooltip> | ||||
<!--语言选择--> | <!--语言选择--> | ||||
<lang-select class="setting-item" /> | |||||
<lang-select class="setting-item" v-if="false" /> | |||||
</div> | </div> | ||||
<!-- 用户头像 --> | <!-- 用户头像 --> | ||||
<span @click="routerTo">个人账户</span> | <span @click="routerTo">个人账户</span> | ||||
<el-dropdown trigger="click"> | |||||
<el-dropdown trigger="click" v-if="false"> | |||||
<div class="avatar-container"> | <div class="avatar-container"> | ||||
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" /> | <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" /> | ||||
<i-ep-caret-bottom class="w-3 h-3" /> | <i-ep-caret-bottom class="w-3 h-3" /> | ||||
@@ -109,6 +122,11 @@ function routerTo() { | |||||
</template> | </template> | ||||
</el-dropdown> | </el-dropdown> | ||||
</div> | </div> | ||||
<!-- 显示的,以上代码作废 --> | |||||
<div style="position: absolute; left: 30px">{{ routeName }}</div> | |||||
<div class="avatar"></div> | |||||
<div @click="routerTo">个人账户</div> | |||||
<div @click="logout" style="margin-left: 10px">退出登录</div> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -154,4 +172,24 @@ function routerTo() { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
// 代替原来的navbar | |||||
.myNavbar { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: flex-end; | |||||
height: 50px; | |||||
padding: 0 20px; | |||||
color: #fff; | |||||
background-color: #fff; | |||||
background-color: #000; | |||||
box-shadow: 0 0 1px #0003; | |||||
.avatar { | |||||
width: 30px; | |||||
height: 30px; | |||||
margin-right: 5px; | |||||
background-color: red; | |||||
border-radius: 50%; | |||||
} | |||||
} | |||||
</style> | </style> |
@@ -1,13 +1,13 @@ | |||||
<script lang="ts" setup> | <script lang="ts" setup> | ||||
import { useSettingsStore } from '@/store/modules/settings'; | |||||
import { useSettingsStore } from "@/store/modules/settings"; | |||||
const settingsStore = useSettingsStore(); | const settingsStore = useSettingsStore(); | ||||
defineProps({ | defineProps({ | ||||
collapse: { | collapse: { | ||||
type: Boolean, | type: Boolean, | ||||
required: true | |||||
} | |||||
required: true, | |||||
}, | |||||
}); | }); | ||||
const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); | const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); | ||||
@@ -19,25 +19,33 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); | |||||
<router-link | <router-link | ||||
v-if="collapse" | v-if="collapse" | ||||
key="collapse" | key="collapse" | ||||
class="h-full w-full flex items-center justify-center" | |||||
class="h-full w-full flex items-center justify-center left-top-box" | |||||
to="/" | to="/" | ||||
> | > | ||||
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" /> | |||||
<span v-else class="ml-3 text-white text-sm font-bold" | |||||
>vue3-element-admin</span | |||||
> | |||||
<!-- <img | |||||
v-if="settingsStore.sidebarLogo" | |||||
src="../../../assets/img/left-top-logo.png" | |||||
class="w-5 h-5" | |||||
/> --> | |||||
<img | |||||
v-if="settingsStore.sidebarLogo" | |||||
src="../../../assets/img/left-top-logo.png" | |||||
/> | |||||
<span v-else class="ml-3 text-white text-sm font-bold"></span> | |||||
</router-link> | </router-link> | ||||
<router-link | <router-link | ||||
v-else | v-else | ||||
key="expand" | key="expand" | ||||
class="h-full w-full flex items-center justify-center" | |||||
class="h-full w-full flex items-center justify-center left-top-box" | |||||
to="/" | to="/" | ||||
> | > | ||||
<img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" /> | |||||
<span class="ml-3 text-white text-sm font-bold" | |||||
>vue3-element-admin</span | |||||
> | |||||
<img | |||||
v-if="settingsStore.sidebarLogo" | |||||
src="../../../assets/img/left-top-logo.png" | |||||
class="left-top-logo" | |||||
/> | |||||
<span class="ml-3 text-white text-sm font-bold"></span> | |||||
</router-link> | </router-link> | ||||
</transition> | </transition> | ||||
</div> | </div> | ||||
@@ -45,6 +53,17 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href); | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
// https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component | // https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component | ||||
.left-top-box { | |||||
background-color: #000; | |||||
} | |||||
.left-top-logo { | |||||
width: 180px; | |||||
height: 40px; | |||||
padding: 5px 0 0 10px; | |||||
} | |||||
.sidebarLogoFade-enter-active { | .sidebarLogoFade-enter-active { | ||||
transition: opacity 2s; | transition: opacity 2s; | ||||
} | } | ||||
@@ -1,5 +1,5 @@ | |||||
<script setup lang="ts"> | <script setup lang="ts"> | ||||
import { useRoute } from "vue-router"; | |||||
import { RouteLocationRaw, useRoute, useRouter } from "vue-router"; | |||||
import SidebarItem from "./SidebarItem.vue"; | import SidebarItem from "./SidebarItem.vue"; | ||||
import Logo from "./Logo.vue"; | import Logo from "./Logo.vue"; | ||||
@@ -10,19 +10,48 @@ import { useAppStore } from "@/store/modules/app"; | |||||
import { storeToRefs } from "pinia"; | import { storeToRefs } from "pinia"; | ||||
import variables from "@/styles/variables.module.scss"; | import variables from "@/styles/variables.module.scss"; | ||||
// 静态路由 | |||||
import { constantRoutes } from "@/router"; | |||||
const settingsStore = useSettingsStore(); | const settingsStore = useSettingsStore(); | ||||
const permissionStore = usePermissionStore(); | const permissionStore = usePermissionStore(); | ||||
const appStore = useAppStore(); | const appStore = useAppStore(); | ||||
const { sidebarLogo } = storeToRefs(settingsStore); | const { sidebarLogo } = storeToRefs(settingsStore); | ||||
const route = useRoute(); | const route = useRoute(); | ||||
const router = useRouter(); | |||||
function routerTo(url: RouteLocationRaw) { | |||||
router.push(url); | |||||
} | |||||
</script> | </script> | ||||
<template> | <template> | ||||
<!-- 左侧菜单 --> | |||||
<div :class="{ 'has-logo': sidebarLogo }"> | <div :class="{ 'has-logo': sidebarLogo }"> | ||||
<logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" /> | <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" /> | ||||
<el-scrollbar> | |||||
<div class="myRouter"> | |||||
<div class="myRouter-item" @click="routerTo('/createVideo')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-edit /></el-icon> | |||||
</div> | |||||
创作视频 | |||||
</div> | |||||
<div class="myRouter-item" @click="routerTo('/myCreating')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-menu /></el-icon> | |||||
</div> | |||||
我的视频 | |||||
</div> | |||||
<div class="myRouter-item pricing" @click="routerTo('/myStore')"> | |||||
<div class="icon"> | |||||
<el-icon><i-ep-Goods /></el-icon> | |||||
</div> | |||||
商店 | |||||
</div> | |||||
</div> | |||||
<!-- <el-scrollbar> | |||||
<el-menu | <el-menu | ||||
style="background-color: #000000" | |||||
:default-active="route.path" | :default-active="route.path" | ||||
:collapse="!appStore.sidebar.opened" | :collapse="!appStore.sidebar.opened" | ||||
:background-color="variables.menuBg" | :background-color="variables.menuBg" | ||||
@@ -40,6 +69,76 @@ const route = useRoute(); | |||||
:is-collapse="!appStore.sidebar.opened" | :is-collapse="!appStore.sidebar.opened" | ||||
/> | /> | ||||
</el-menu> | </el-menu> | ||||
</el-scrollbar> | |||||
</el-scrollbar> --> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<style lang="scss" scoped> | |||||
.myRouter { | |||||
position: relative; | |||||
height: calc(100% - 50px); | |||||
padding: 200px 20px 0; | |||||
color: #fff; | |||||
&-item { | |||||
display: flex; | |||||
width: 100%; | |||||
height: 50px; | |||||
padding-left: 20px; | |||||
font-size: 20px; | |||||
font-weight: 500; | |||||
line-height: 50px; | |||||
text-align: center; | |||||
cursor: pointer; | |||||
border-bottom: 2px solid #fff; | |||||
.icon { | |||||
width: 40px; | |||||
height: 40px; | |||||
color: #fff; | |||||
border-radius: 50%; | |||||
.el-icon { | |||||
width: 25px; | |||||
height: 25px; | |||||
font-size: 25px; | |||||
color: #fff; | |||||
text-align: center; | |||||
vertical-align: sub; | |||||
} | |||||
} | |||||
&:hover { | |||||
color: #000; | |||||
background-color: #fff; | |||||
.el-icon { | |||||
color: #000; | |||||
} | |||||
} | |||||
} | |||||
.pricing { | |||||
position: absolute; | |||||
bottom: 20px; | |||||
width: calc(100% - 40px); | |||||
text-align: center; | |||||
} | |||||
} | |||||
:deep(.el-sub-menu__title) { | |||||
background-color: #000 !important; | |||||
} | |||||
:deep(.el-menu-item) { | |||||
div { | |||||
background-color: #000 !important; | |||||
} | |||||
background-color: #000 !important; | |||||
} | |||||
:deep(.el-menu-item.is-active) { | |||||
color: #fff; | |||||
} | |||||
</style> |
@@ -31,8 +31,13 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
path: "createVideo", | path: "createVideo", | ||||
component: () => import("@/views/createVideo/index.vue"), | component: () => import("@/views/createVideo/index.vue"), | ||||
name: "createVideo", | name: "createVideo", | ||||
meta: { title: "createVideo", icon: "homepage", affix: true }, | |||||
} | |||||
meta: { | |||||
title: "createVideo", | |||||
icon: "homepage", | |||||
affix: true, | |||||
name: "创作视频", | |||||
}, | |||||
}, | |||||
], | ], | ||||
}, | }, | ||||
// 视频列表 | // 视频列表 | ||||
@@ -45,8 +50,13 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
path: "myCreating", | path: "myCreating", | ||||
component: () => import("@/views/myCreating/index.vue"), | component: () => import("@/views/myCreating/index.vue"), | ||||
name: "myCreating", | name: "myCreating", | ||||
meta: { title: "myCreating", icon: "homepage", affix: true }, | |||||
} | |||||
meta: { | |||||
title: "myCreating", | |||||
icon: "homepage", | |||||
affix: true, | |||||
name: "我的视频", | |||||
}, | |||||
}, | |||||
], | ], | ||||
}, | }, | ||||
// 个人账户 | // 个人账户 | ||||
@@ -59,36 +69,52 @@ export const constantRoutes: RouteRecordRaw[] = [ | |||||
path: "myAccount", | path: "myAccount", | ||||
component: () => import("@/views/myAccount/index.vue"), | component: () => import("@/views/myAccount/index.vue"), | ||||
name: "myAccount", | name: "myAccount", | ||||
meta: { title: "myAccount", icon: "homepage", affix: true }, | |||||
} | |||||
meta: { | |||||
title: "myAccount", | |||||
icon: "homepage", | |||||
affix: true, | |||||
name: "个人账户", | |||||
}, | |||||
}, | |||||
], | ], | ||||
}, | }, | ||||
// 商店 | |||||
{ | { | ||||
path: "/dashboard", | |||||
path: "/", | |||||
component: Layout, | component: Layout, | ||||
redirect: "/dashboard", | |||||
redirect: "/myStore", | |||||
children: [ | children: [ | ||||
{ | { | ||||
path: "dashboard", | |||||
component: () => import("@/views/dashboard/index.vue"), | |||||
name: "Dashboard", | |||||
meta: { title: "dashboard", icon: "homepage", affix: true }, | |||||
}, | |||||
{ | |||||
path: "401", | |||||
component: () => import("@/views/error-page/401.vue"), | |||||
meta: { hidden: true }, | |||||
}, | |||||
{ | |||||
path: "404", | |||||
component: () => import("@/views/error-page/404.vue"), | |||||
meta: { hidden: true }, | |||||
path: "myStore", | |||||
component: () => import("@/views/myStore/index.vue"), | |||||
name: "myStore", | |||||
meta: { title: "myStore", icon: "homepage", affix: true, name: "商店" }, | |||||
}, | }, | ||||
], | ], | ||||
}, | }, | ||||
// { | |||||
// path: "/dashboard", | |||||
// component: Layout, | |||||
// redirect: "/dashboard", | |||||
// children: [ | |||||
// { | |||||
// path: "dashboard", | |||||
// component: () => import("@/views/dashboard/index.vue"), | |||||
// name: "Dashboard", | |||||
// meta: { title: "dashboard", icon: "homepage", affix: true }, | |||||
// }, | |||||
// { | |||||
// path: "401", | |||||
// component: () => import("@/views/error-page/401.vue"), | |||||
// meta: { hidden: true }, | |||||
// }, | |||||
// { | |||||
// path: "404", | |||||
// component: () => import("@/views/error-page/404.vue"), | |||||
// meta: { hidden: true }, | |||||
// }, | |||||
// ], | |||||
// }, | |||||
// 外部链接 | // 外部链接 | ||||
/*{ | /*{ | ||||
@@ -43,8 +43,8 @@ interface DefaultSettings { | |||||
const defaultSettings: DefaultSettings = { | const defaultSettings: DefaultSettings = { | ||||
title: "vue3-element-admin", | title: "vue3-element-admin", | ||||
showSettings: true, | |||||
tagsView: true, | |||||
showSettings: false, | |||||
tagsView: false, | |||||
fixedHeader: false, | fixedHeader: false, | ||||
sidebarLogo: true, | sidebarLogo: true, | ||||
layout: "left", | layout: "left", | ||||
@@ -4,6 +4,7 @@ import { useStorage } from "@vueuse/core"; | |||||
export const useSettingsStore = defineStore("setting", () => { | export const useSettingsStore = defineStore("setting", () => { | ||||
// state | // state | ||||
const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView); | const tagsView = useStorage<boolean>("tagsView", defaultSettings.tagsView); | ||||
const showSettings = ref<boolean>(defaultSettings.showSettings); | const showSettings = ref<boolean>(defaultSettings.showSettings); | ||||
@@ -37,6 +37,8 @@ | |||||
} | } | ||||
&.has-logo { | &.has-logo { | ||||
background-color: #000; | |||||
.el-scrollbar { | .el-scrollbar { | ||||
height: calc(100% - 50px); | height: calc(100% - 50px); | ||||
} | } | ||||
@@ -4,10 +4,15 @@ | |||||
--menuBg: #304156; | --menuBg: #304156; | ||||
--menuText: #bfcbd9; | --menuText: #bfcbd9; | ||||
--menuActiveText: #409eff; | --menuActiveText: #409eff; | ||||
--menuHover: #263445; | |||||
--subMenuBg: #1f2d3d; | |||||
// 左侧菜单鼠标经过颜色 | |||||
--menuHover: #000; | |||||
// --menuHover: #263445; | |||||
// 左侧子菜单颜色 | |||||
--subMenuBg: #000; | |||||
// --subMenuBg: #1f2d3d; | |||||
--subMenuActiveText: #f4f4f5; | --subMenuActiveText: #f4f4f5; | ||||
--subMenuHover: #001528; | |||||
// --subMenuHover: #001528; | |||||
--subMenuHover: #000; | |||||
} | } | ||||
$menuBg: var(--menuBg); | $menuBg: var(--menuBg); | ||||
@@ -5,6 +5,7 @@ declare global { | |||||
const ElForm: typeof import("element-plus/es")["ElForm"]; | const ElForm: typeof import("element-plus/es")["ElForm"]; | ||||
const ElMessage: typeof import("element-plus/es")["ElMessage"]; | const ElMessage: typeof import("element-plus/es")["ElMessage"]; | ||||
const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"]; | const ElMessageBox: typeof import("element-plus/es")["ElMessageBox"]; | ||||
const ElTree: typeof import("element-plus/es")["ElTree"]; | |||||
const asyncComputed: typeof import("@vueuse/core")["asyncComputed"]; | const asyncComputed: typeof import("@vueuse/core")["asyncComputed"]; | ||||
const autoResetRef: typeof import("@vueuse/core")["autoResetRef"]; | const autoResetRef: typeof import("@vueuse/core")["autoResetRef"]; | ||||
const computed: typeof import("vue")["computed"]; | const computed: typeof import("vue")["computed"]; | ||||
@@ -278,6 +279,7 @@ declare module "vue" { | |||||
readonly ElMessageBox: UnwrapRef< | readonly ElMessageBox: UnwrapRef< | ||||
typeof import("element-plus/es")["ElMessageBox"] | typeof import("element-plus/es")["ElMessageBox"] | ||||
>; | >; | ||||
readonly ElTree: UnwrapRef<typeof import("element-plus/es")["ElTree"]>; | |||||
readonly asyncComputed: UnwrapRef< | readonly asyncComputed: UnwrapRef< | ||||
typeof import("@vueuse/core")["asyncComputed"] | typeof import("@vueuse/core")["asyncComputed"] | ||||
>; | >; | ||||
@@ -11,6 +11,8 @@ declare module '@vue/runtime-core' { | |||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] | ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] | ||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] | ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] | ||||
ElButton: typeof import('element-plus/es')['ElButton'] | ElButton: typeof import('element-plus/es')['ElButton'] | ||||
ElCard: typeof import('element-plus/es')['ElCard'] | |||||
ElCol: typeof import('element-plus/es')['ElCol'] | |||||
ElDialog: typeof import('element-plus/es')['ElDialog'] | ElDialog: typeof import('element-plus/es')['ElDialog'] | ||||
ElDivider: typeof import('element-plus/es')['ElDivider'] | ElDivider: typeof import('element-plus/es')['ElDivider'] | ||||
ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ElDropdown: typeof import('element-plus/es')['ElDropdown'] | ||||
@@ -20,17 +22,26 @@ declare module '@vue/runtime-core' { | |||||
ElFormItem: typeof import('element-plus/es')['ElFormItem'] | ElFormItem: typeof import('element-plus/es')['ElFormItem'] | ||||
ElIcon: typeof import('element-plus/es')['ElIcon'] | ElIcon: typeof import('element-plus/es')['ElIcon'] | ||||
ElInput: typeof import('element-plus/es')['ElInput'] | ElInput: typeof import('element-plus/es')['ElInput'] | ||||
ElLink: typeof import('element-plus/es')['ElLink'] | |||||
ElMenu: typeof import('element-plus/es')['ElMenu'] | ElMenu: typeof import('element-plus/es')['ElMenu'] | ||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] | ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] | ||||
ElOption: typeof import('element-plus/es')['ElOption'] | ElOption: typeof import('element-plus/es')['ElOption'] | ||||
ElPagination: typeof import('element-plus/es')['ElPagination'] | |||||
ElRadio: typeof import('element-plus/es')['ElRadio'] | |||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] | |||||
ElRow: typeof import('element-plus/es')['ElRow'] | ElRow: typeof import('element-plus/es')['ElRow'] | ||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | ||||
ElSelect: typeof import('element-plus/es')['ElSelect'] | ElSelect: typeof import('element-plus/es')['ElSelect'] | ||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] | ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] | ||||
ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ElSwitch: typeof import('element-plus/es')['ElSwitch'] | ||||
ElTable: typeof import('element-plus/es')['ElTable'] | |||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] | |||||
ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ElTabPane: typeof import('element-plus/es')['ElTabPane'] | ||||
ElTabs: typeof import('element-plus/es')['ElTabs'] | ElTabs: typeof import('element-plus/es')['ElTabs'] | ||||
ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ElTooltip: typeof import('element-plus/es')['ElTooltip'] | ||||
ElTree: typeof import('element-plus/es')['ElTree'] | |||||
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect'] | |||||
ElUpload: typeof import('element-plus/es')['ElUpload'] | |||||
GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | ||||
Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | ||||
IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | ||||
@@ -39,8 +50,15 @@ declare module '@vue/runtime-core' { | |||||
IEpDelete: typeof import('~icons/ep/delete')['default'] | IEpDelete: typeof import('~icons/ep/delete')['default'] | ||||
IEpDownload: typeof import('~icons/ep/download')['default'] | IEpDownload: typeof import('~icons/ep/download')['default'] | ||||
IEpEdit: typeof import('~icons/ep/edit')['default'] | IEpEdit: typeof import('~icons/ep/edit')['default'] | ||||
IEpGoods: typeof import('~icons/ep/goods')['default'] | |||||
IEpMenu: typeof import('~icons/ep/menu')['default'] | |||||
IEpPlus: typeof import('~icons/ep/plus')['default'] | IEpPlus: typeof import('~icons/ep/plus')['default'] | ||||
IEpRefresh: typeof import('~icons/ep/refresh')['default'] | |||||
IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default'] | |||||
IEpSearch: typeof import('~icons/ep/search')['default'] | |||||
IEpSetting: typeof import('~icons/ep/setting')['default'] | IEpSetting: typeof import('~icons/ep/setting')['default'] | ||||
IEpTop: typeof import('~icons/ep/top')['default'] | |||||
IEpUploadFilled: typeof import('~icons/ep/upload-filled')['default'] | |||||
IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | ||||
LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | ||||
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | ||||
@@ -53,4 +71,7 @@ declare module '@vue/runtime-core' { | |||||
SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default'] | SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default'] | ||||
WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | ||||
} | } | ||||
export interface ComponentCustomProperties { | |||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective'] | |||||
} | |||||
} | } |
@@ -156,9 +156,10 @@ let languageOptions = reactive([ | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
// height: calc(100vh - 84px); | // height: calc(100vh - 84px); | ||||
height: 844px; | |||||
height: 887px; | |||||
padding: 20px 0 0 40px; | padding: 20px 0 0 40px; | ||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 25px 0 0; | |||||
} | } | ||||
.left { | .left { | ||||
@@ -79,10 +79,11 @@ | |||||
<script setup></script> | <script setup></script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
height: 844px; | |||||
height: 887px; | |||||
padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
// height: calc(100vh - 84px); | // height: calc(100vh - 84px); | ||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 25px 0 0; | |||||
} | } | ||||
.left { | .left { | ||||
@@ -96,9 +96,11 @@ function mouseenter(item) { | |||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.page { | .page { | ||||
height: calc(100vh - 84px); | |||||
// height: calc(100vh - 84px); | |||||
height: 887px; | |||||
padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 25px 0 0; | |||||
} | } | ||||
:deep(.el-input__wrapper) { | :deep(.el-input__wrapper) { | ||||
@@ -0,0 +1,16 @@ | |||||
<template> | |||||
<div class="page">商店</div> | |||||
</template> | |||||
<script setup> | |||||
let title = ref(""); | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.page { | |||||
// height: calc(100vh - 84px); | |||||
height: 887px; | |||||
padding: 20px 0 0 20px; | |||||
background-color: #fff; | |||||
border-radius: 25px 0 0; | |||||
} | |||||
</style> |