活动介绍

vue is 顶部导航栏添加logo

时间: 2023-08-08 08:07:01 浏览: 232
要在Vue的顶部导航栏中添加Logo,可以按照以下步骤操作: 1. 在项目文件夹中创建一个名为“assets”的文件夹,用于存放Logo图片文件。 2. 在Vue组件中的“template”标签中添加一个“img”标签,以显示Logo图片。例如: ``` <template> <div class="navbar"> <img src="@/assets/logo.png" alt="Logo"> <ul class="nav-links"> // 导航链接 </ul> </div> </template> ``` 在这个例子中,“@/”是一个别名,指向项目的根目录。因此,“@/assets/logo.png”指的是位于“assets”文件夹中的“logo.png”文件。 3. 使用CSS样式表来对Logo图片进行样式设置,以便它适应顶部导航栏的大小和位置。例如: ``` <style> .navbar { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 20px; background-color: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); } .navbar img { height: 40px; } .nav-links { display: flex; justify-content: space-between; align-items: center; list-style: none; margin: 0; padding: 0; } .nav-links li { margin-right: 20px; } // 其他样式设置 </style> ``` 在这个例子中,“.navbar img”选择器设置Logo图片的高度为40像素。 这样,你就可以在Vue的顶部导航栏中添加Logo了!
阅读全文

相关推荐

<template> <TopHeader class="page-layout__header" /> <SideBar :menus class="page-layout__side" /> <BreadMenu /> {{ pageTitle.label }} <a-button v-if="route?.meta?.backBtn" type="primary" @click="handleBack" >{{ btnLabel }}</a-button > <RouterView v-slot="{ Component }"> <KeepAlive :include="cacheViews"> <component :is="Component" :key="routeKey" /> </KeepAlive> </RouterView> </template> <script setup lang="ts"> import { computed, onMounted, ref, h, watchEffect, watch, nextTick } from "vue" import { useAppStore, useMsgStore, useUserStore, useSysConfigStore } from "@/stores" import TopHeader from "./components/TopHeader.vue" import SideBar from "./components/side-bar/index.vue" import BreadMenu from "./components/BreadMenu.vue" import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router" import { Button, Notification, type NotificationReturn } from "@arco-design/web-vue" import type { RecordModel as MessageData } from "@/api/message/api-type" import { IconRight } from "@arco-design/web-vue/es/icon" import { ORDER_TRANSFER } from "@/router/order" import { getSystemConfig } from "@/api/system/index.serv" import { to } from "await-to-js" defineOptions({ name: "Layout" }) const route = useRoute() const router = useRouter() const appStore = useAppStore() const userStore = useUserStore() const msgStore = useMsgStore() const sysConfigStore = useSysConfigStore() const orderMsgReturn = ref<NotificationReturn>() const breadMenuHidden = ref(false) const btnLabel = computed(() => { return window.opener ? "关闭" : route?.meta.backBtn?.label || "关闭" }) const cacheViews = computed(() => appStore.routeViewCache) const msgId = computed(() => msgStore.msgNoticeId) const pageTitle = computed(() => { const { navTitle, title, titleVisible } = route.meta ?? {} return { visible: title && titleVisible !== false, label: navTitle || title } }) const routeKey = computed(() => { const { name, query = {} } = route if (Object.keys(query).length) { return ${name as string}-${JSON.stringify(route.query)} } return name as string }) const wrapClass = computed(() => { return appStore.menuStatus ? "menu-collapse" : "menu-expend" }) const isDark = computed(() => appStore.theme === "dark") const menus = computed(() => userStore.accessMenu ?? []) const menuMap = computed(() => userStore.accessMenuMap) const doOrderLoop = computed(() => { return [...menuMap.value.values()].some((list) => { const loopData = list?.meta?.doLoop if (!loopData) return false const { code, dependMenu } = loopData if (code === "order") { if (!dependMenu) return true return menuMap.value.has(dependMenu) } else { return false } }) }) watchEffect(() => { breadMenuHidden.value = route.meta?.breadMenuVisible === false }) const goToTransfer = (data: MessageData) => { router .push({ name: ORDER_TRANSFER.name }) .then((res) => { Notification.remove(msgId.value) }) } const showOrderMsg = (data: MessageData) => { return Notification.info({ icon: () => h("span", { class: ["iconfont icon-file"] }), title: "您有一个订单需要进行调度", content: data.msg_body, id: msgId.value, closable: true, duration: 0, class: "order-msg__tip", position: "bottomRight", footer: () => h( Button, { type: "text", onClick: () => goToTransfer(data) }, ["立即前往", h(IconRight)] ) }) } watch( [() => msgStore.msgTargetId, () => sysConfigStore.orderMessageConfig.orderNoticeSwitch as number], async ([id, orderNoticeSwitch]: [number | undefined, number]) => { await nextTick() if (id && msgStore.unreadMsgLatest && orderNoticeSwitch === 1) { const msgReturn = showOrderMsg(msgStore.unreadMsgLatest) orderMsgReturn.value ||= msgReturn } else { Notification.remove(msgId.value) } }, { immediate: true } ) const handleBack = () => { if (window.opener) { window.close() } else { const routeTo = route.meta?.backBtn?.routeTo if (routeTo) { router.replace({ name: routeTo }) } } } onMounted(async () => { msgStore.clearLoopTimer() const [err, res] = await to(getSystemConfig()) if (!err && res) { sysConfigStore.setUpdateConfig({ id: res.data.id, orderNoticeSwitch: res.data.orderNoticeSwitch }) doOrderLoop.value && msgStore.messageAndCountLoop() } }) onBeforeRouteLeave(() => { Notification.remove(msgId.value) msgStore.clearLoopTimer() }) </script> <style lang="scss" scoped> @import "../assets/styles/mixin.scss"; $--layout-transition-all: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); $--layout-transition-margin: margin 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); $--layout-transition-left: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); .page-layout { height: 100%; display: flex; flex-direction: column; overflow: hidden; &--placeholer { flex: none; height: calc(var(--page-header-height) + var(--page-breadmenu-height)); transition: none; &.no-nav { height: var(--page-header-height); } } &__header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--page-max-z-index); flex: none; padding: 0 16px; height: var(--page-header-height); border-bottom: var(--color-border-2) 1px solid; background-color: #fff; transition: $--layout-transition-all; } &__side { position: fixed; z-index: var(--page-max-z-index); left: 0; top: var(--page-header-height); bottom: 0; display: flex; flex-direction: column; :deep(.arco-menu-inner) { flex: 1; margin-bottom: var(--menu-collapse-width); } :deep(.arco-menu-collapse-button) { position: absolute; } & + .page-layout__main { margin-left: var(--menu-expand-width); .page-layout__main-nav { left: var(--menu-expand-width); } } &.arco-menu-collapsed + .page-layout__main { margin-left: var(--menu-collapse-width); .page-layout__main-nav { left: var(--menu-collapse-width); } } } &__main { padding: var(--page-padding-gutter); padding-top: 0; transition: $--layout-transition-margin; height: 100%; display: flex; flex-direction: column; overflow-y: auto; @include scrollbar(8px, transparent, var(--color-fill-4)); &.no-nav { padding-top: var(--page-padding-gutter); } &-nav { flex: none; display: flex; align-items: center; background: var(--page-back-color); position: fixed; z-index: var(--page-max-z-index); top: var(--page-header-height); left: 0; right: 0; height: var(--page-breadmenu-height); padding: 0 var(--page-padding-gutter); transition: $--layout-transition-left; } &-content { position: relative; height: 100%; display: flex; flex-direction: column; padding: var(--page-padding-gutter); padding-top: --page-breadmenu-height; background: #f9f9f9; flex: 1; // margin-left: var(--menu-expand-width); // transition: margin-left 0.28s; // transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); &.no-nav { padding-top: var(--page-padding-gutter); } } &-view { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 4px; padding: var(--page-padding-gutter); // > :last-child:not(.common-page-title) { // flex: 1; // display: flex; // flex-direction: column; // } &-title { display: flex; justify-content: space-between; align-items: center; } } } &.theme-dark { .page-layout__header, .page-layout__side { background: var(--color-text-2); } } } </style> <style lang="scss"> .order-msg__tip { .arco-notification-title { font-weight: 600; } .arco-notification-left { padding-right: 5px; .arco-notification-icon { font-size: 16px; color: var(--color-text-2); } } .arco-notification-content { margin-top: 6px; } } </style>

<template> <el-menu class="site-navbar__menu" mode="horizontal" style="height:38px;"> <el-menu-item v-if="sidebarIsShow" class="site-navbar__switch" id="myzhedie" index="0" @click="sidebarFold = !sidebarFold" style="width:64px;"> <icon-svg name="zhedie" style="color: #fff;"></icon-svg> </el-menu-item> <el-menu-item v-else class="site-navbar__switch" index="0" id="myhome1" style="width:64px;"> <icon-svg name="home" style="color: #fff;"></icon-svg> </el-menu-item> <el-menu-item class="site-navbar__switch" index="0" style="padding:0 0px;background-color:transparent;color:inherit;margin-left:-10px"> </el-menu-item> </el-menu> <el-menu id="myNavbar" :default-active="activeMenu" @select="handleSelect" class="site-navbar__menu" mode="horizontal" style="margin-left:21px;" default-active="home" background-color="transparent" text-color="#e6f7ff" active-text-color="#ffffff"> <el-menu-item v-if="isAuth('battery:bmsbatteryinfo:monitornavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="home" @click="openHomeHandle"> <icon-svg name="chezidingyi" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg> 实时查询 </el-menu-item> <el-menu-item v-if="isAuth('battery:bmsbatteryinfo:traditionnavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="tradition" @click="openSideMenusHandle('31,118,150,153,214,1,46,32,67,-100')"> <icon-svg name="system" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg> 数据管理中心 </el-menu-item> <el-menu-item v-if="isAuth('battery:bmsbatteryinfo:reportnavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="report" @click="openSideMenusHandle('445,453,458,459,462,-2')"> <icon-svg name="tubiao" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg> 统计分析 </el-menu-item> <el-menu-item v-if="isAuth('battery:bmsbatteryinfo:statisticsnavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="statistics" @click="openSideMenusHandle('465,470,471,475,-1')"> <icon-svg name="shouye" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg> 安全中心 </el-menu-item> <el-menu-item v-if="isAuth('battery:bmsbatteryinfo:managenavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="manage" @click="openSideMenusHandle('405,384,1,-3')"> <icon-svg name="config" class="site-sidebar__menu-icon" style="color: #e6f7ff;"></icon-svg> 管理中心 </el-menu-item> <el-submenu id="myWindow" v-if="isAuth('battery:bmsbatteryinfo:largescreennavbar')" style="margin-left:-1%;font-size: 15px;font-weight: 500;" index="largescreen"> <template slot="title" style="margin-left:-1%;"> <icon-svg name="dashujukeshihua" class="site-sidebar__menu-icon" style="color:rgb(21, 162, 227);"></icon-svg> 驾驶舱 </template> <el-menu-item index="2-1" @click="openEchartInNewWindow" v-if="isAuth('mqtt:mtbatteryinfolastest:largedep')"> <icon-svg name="dashujukeshihua" class="site-sidebar__menu-icon" style="color: #1a2b5f;"></icon-svg> 欣动电池大屏 </el-menu-item> </el-submenu> </el-menu> <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal" background-color="transparent" text-color="#e6f7ff" active-text-color="#ffffff"> <el-menu-item index="1" id="mydaping" @click="openEchartInNewWindow" v-if="isAuth('mqtt:mtbatteryinfolastest:largeDatalist')"> <template slot="title"> <el-badge value="大屏" type="primary"> <icon-svg name="dashujukeshihua" class="el-icon-rank" style="color: #e6f7ff;"></icon-svg> </el-badge> </template> </el-menu-item> <el-menu-item index="2" id="myshezhi" @click="$router.push({ name: 'theme' })"> <template slot="title"> <el-badge value="设置" type="primary"> <icon-svg name="shezhi" class="el-icon-setting" style="color: #e6f7ff;"></icon-svg> </el-badge> </template> </el-menu-item> <el-menu-item class="site-navbar__avatar" index="3" id="myhuichu"> <el-dropdown :show-timeout="0" placement="bottom"> {{ userName }} <el-dropdown-menu slot="dropdown" style="background-color: #1a2b5f; border: 1px solid #4a9eff;"> <el-dropdown-item @click.native="updatePasswordHandle()" style="color: #e6f7ff;">修改密码</el-dropdown-item> <el-dropdown-item @click.native="logoutHandle()" style="color: #e6f7ff;">退出</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-menu-item> </el-menu> <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password> </template> <script> import UpdatePassword from './main-navbar-update-password' import { clearLoginInfo,EventBus } from '@/utils' import Router from 'vue-router' import http from '@/utils/httpRequest' import { isURL } from '@/utils/validate' export default { data () { return { firstLogin: true, updatePassowrdVisible: false, activeMenu: 'tradition' // 默认激活的菜单项ID } }, components: { UpdatePassword }, computed: { navbarLayoutType: { get () { return this.$store.state.common.navbarLayoutType } }, sidebarFold: { get () { return this.$store.state.common.sidebarFold }, set (val) { this.$store.commit('common/updateSidebarFold', val) } }, mainTabs: { get () { return this.$store.state.common.mainTabs }, set (val) { this.$store.commit('common/updateMainTabs', val) } }, menuActiveName: { get () { return this.$store.state.common.menuActiveName }, set (val) { this.$store.commit('common/updateMenuActiveName', val) } }, userName: { get () { return this.$store.state.user.name } }, isHomePage(){ return this.$route.path === '/home' }, // 左侧菜单显示 sidebarIsShow: { get () { return this.$store.state.common.sidebarIsShow }, set (val) { this.$store.commit('common/updateSidebarIsShow', val) } }, }, created() { // 刚登录进来,多点击监控中心,防止左侧缓存的菜单出现 if(localStorage.getItem('firstLogin')===null){ localStorage.clear(); localStorage.setItem('firstLogin', '1'); this.firstLogin = false; // 显示左侧菜单隐藏 this.openHomeHandle () setTimeout(() => { this.openHomeHandle (); }, 1); setTimeout(() => { this.openHomeHandle (); }, 100); }else{ } this.openHomeHandle () setTimeout(() => { this.openHomeHandle (); }, 10); setTimeout(() => { this.openHomeHandle (); }, 100); setTimeout(() => { this.openHomeHandle (); }, 120); setTimeout(() => { this.openHomeHandle (); }, 180); // 页面加载时尝试恢复之前的选中状态。刷新时一直保持点击颜色 this.activeMenu = sessionStorage.getItem('activeMenu') || this.activeMenu; }, methods: { handleSelect(key, keyPath) { // 菜单项被点击时保存选中状态 sessionStorage.setItem('activeMenu', key); }, openEchartInNewWindow() { const routeData = this.$router.resolve({ name: 'echart' }); window.open(routeData.href, '_blank'); }, // 修改密码 updatePasswordHandle () { this.updatePassowrdVisible = true this.$nextTick(() => { this.$refs.updatePassowrd.init() }) }, // 退出 logoutHandle () { this.$confirm(确定进行[退出]操作?, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$http({ url: this.$http.adornUrl('/sys/logout'), method: 'post', data: this.$http.adornData() }).then(({data}) => { if (data && data.code === 0) { clearLoginInfo() this.$router.push({ name: 'login' }) } }) }).catch(() => {}) }, openSideMenusHandle (parentMenuIds) { this.mainTabs = [] //清除打开的tab菜单 this.menuActiveName = '' // 左侧菜单显示 this.$store.state.common.sidebarIsShow = true // 折叠打开 this.$store.state.common.sidebarFold = false // 这里调用左侧菜单的方法 EventBus.$emit('callMethod',parentMenuIds); // 再次调用,防止点击监控中心--然后跳转到其他菜单时无反应 setTimeout(() => { EventBus.$emit('callMethod',parentMenuIds); }, 150); setTimeout(() => { EventBus.$emit('callMethod',parentMenuIds); }, 100); setTimeout(() => { EventBus.$emit('callMethod',parentMenuIds); }, 220); setTimeout(() => { EventBus.$emit('callMethod',parentMenuIds); }, 120); }, openHomeHandle () { this.$store.state.common.sidebarFold = true // 左侧菜单显示关闭 this.$store.state.common.sidebarIsShow = false this.$router.push({ name: 'home' }) }, //关闭全部tab tabsCloseAllHandle () { this.mainTabs = [] this.menuActiveName = '' this.$router.push({ name: 'home' }) }, reloadMenus(parentMenuIds){ this.$http({ url: this.$http.adornUrl('/sys/menu/navappoint'), method: 'get', params: this.$http.adornParams({ 'parentMenuIds': parentMenuIds }) }).then(({data}) => { if (data && data.code === 0) { this.fnAddDynamicMenuRoutes(data.menuList) this.$router.options.isAddDynamicMenuRoutes = true sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]')) sessionStorage.setItem('permissions', JSON.stringify(data.permissions || '[]')) EventBus.$emit('callMethod',parentMenuIds); this.tabsCloseAllHandle (); // 折叠打开 this.$store.state.common.sidebarFold = false this.$router.push({ name: 'home' }) } else { sessionStorage.setItem('menuList', '[]') sessionStorage.setItem('permissions', '[]') // 折叠缩进 this.$store.state.common.sidebarFold = true next() } }).catch((e) => { console.log(%c${e} 请求菜单列表和权限失败,跳转至登录页!!, 'color:blue') }) }, /** * 添加动态(菜单)路由 * @param {*} menuList 菜单列表 * @param {*} routes 递归创建的动态(菜单)路由 */ fnAddDynamicMenuRoutes (menuList = [], routes = []) { var temp = [] for (var i = 0; i < menuList.length; i++) { if (menuList[i].list && menuList[i].list.length >= 1) { temp = temp.concat(menuList[i].list) } else if (menuList[i].url && /\S/.test(menuList[i].url)) { menuList[i].url = menuList[i].url.replace(/^\//, '') var route = { path: menuList[i].url.replace('/', '-'), component: null, name: menuList[i].url.replace('/', '-'), meta: { menuId: menuList[i].menuId, title: menuList[i].name, isDynamic: true, isTab: true, iframeUrl: '' } } if (isURL(menuList[i].url)) { route['path'] = i-${menuList[i].menuId} route['name'] = i-${menuList[i].menuId} route['meta']['iframeUrl'] = menuList[i].url } else { try { route['component'] = _import(modules/${menuList[i].url}) || null } catch (e) {} } routes.push(route) } } if (temp.length >= 1) { this.fnAddDynamicMenuRoutes(temp, routes) } else { var mainRoutes = { name: 'main-dynamic', children: routes, path: '/' } this.$router.addRoutes([ mainRoutes, { path: '*', redirect: { name: '404' } } ]) sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]')) console.log('\n') console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue') console.log(mainRoutes.children) console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue') } }, /** * 添加动态(菜单)路由 * @param {*} menuList 菜单列表 * @param {*} routes 递归创建的动态(菜单)路由 */ fnAddDynamicMenuRoutes2 (menuList) { var routes = [] var temp = [] for (var i = 0; i < menuList.length; i++) { if (menuList[i].list && menuList[i].list.length >= 1) { temp = temp.concat(menuList[i].list) } else if (menuList[i].url && /\S/.test(menuList[i].url)) { menuList[i].url = menuList[i].url.replace(/^\//, '') var route = { path: menuList[i].url.replace('/', '-'), component: null, name: menuList[i].url.replace('/', '-'), meta: { menuId: menuList[i].menuId, title: menuList[i].name, isDynamic: true, isTab: true, iframeUrl: '' } } if (isURL(menuList[i].url)) { route['path'] = i-${menuList[i].menuId} route['name'] = i-${menuList[i].menuId} route['meta']['iframeUrl'] = menuList[i].url } else { try { route['component'] = _import(modules/${menuList[i].url}) || null } catch (e) {} } routes.push(route) } } if (temp.length >= 1) { this.fnAddDynamicMenuRoutes(temp, routes) } else { var mainRoutes = { name: 'main-dynamic', children: routes, path: '/' } this.$router.addRoutes([ mainRoutes, { path: '*', redirect: { name: '404' } } ]) sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]')) console.log('\n') console.log('%c!<-------------------- 动态(菜单)路由 s -------------------->', 'color:blue') console.log(mainRoutes.children) console.log('%c!<-------------------- 动态(菜单)路由 e -------------------->', 'color:blue') } } } } </script> <style scoped> /* 全局导航栏样式 */ .site-navbar { font-family: 'Microsoft YaHei', Arial, sans-serif; } /* 菜单项悬停效果 */ #myNavbar .el-menu-item:hover { background-color: rgba(42, 139, 242, 0.3) !important; color: #fff !important; } /* 顶部菜单点击后的背景颜色 */ #myNavbar .el-menu-item.is-active { background: linear-gradient(90deg, #2a8bf2 0%, #1e62c7 100%) !important; color: #fff !important; border-bottom: 2px solid #4affff; box-shadow: 0 2px 8px rgba(0, 120, 255, 0.3); } /* 驾驶舱菜单样式 */ #myWindow .el-submenu__title { color: #e6f7ff !important; font-weight: 500; } #myWindow .el-submenu__title:hover { background-color: rgba(42, 139, 242, 0.3) !important; } /* 右侧菜单项样式 */ .site-navbar__menu--right .el-menu-item { height: 38px !important; line-height: 38px !important; } .site-navbar__menu--right .el-menu-item:hover { background-color: rgba(42, 139, 242, 0.3) !important; } /* 用户头像区域 */ .site-navbar__avatar { padding: 0 10px !important; } .site-navbar__avatar:hover { background-color: rgba(42, 139, 242, 0.3) !important; } /* 下拉菜单样式 */ .el-dropdown-menu__item { font-size: 14px; padding: 8px 20px; } .el-dropdown-menu__item:hover { background-color: #2a8bf2 !important; color: #fff !important; } /* 折叠按钮样式 */ #myzhedie:hover, #myhome1:hover { background-color: rgba(42, 139, 242, 0.3) !important; } </style>驾驶舱子菜单字体看不清,改哪里

<template> <el-container class="layout-container-demo" style="height: 500px"> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <el-icon style="margin-right: 8px; margin-top: 1px"> <setting /> </el-icon> <template #dropdown> <el-dropdown-menu> <el-dropdown-item @click="logOut()">退出登录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> 关宇航 </el-header> <el-container> <el-aside width="200px"> <el-scrollbar> <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :router="true"> <template v-for="(item, index) in menuList"> <el-menu-item v-if="isShow(item)" :index="index" :route="item.path">{{ item.label }}</el-menu-item> </template> </el-menu> </el-scrollbar> </el-aside> <el-main> <router-view /> </el-main> </el-container> </el-container> </template> <script setup> import { Menu as IconMenu, Setting } from '@element-plus/icons-vue' import useUserStore from '@/store/modules/user'; import { ElMessage } from 'element-plus' const userStore = useUserStore(); const router = useRouter(); const menuList = ref([]); function isShow(item) { return item?.aaaaa != 'asaf' } onMounted(() => { if (userStore.isLogin()) { setMenu(router.options.routes); } else { ElMessage.error(‘用户未登录,跳转至登录页面’); router.push(‘/’); } }); function setMenu(routes) { const menu = []; for (const route of routes) { if (route.children) { for (const child of route.children) { if (child.meta && child.meta.title) { const menuItem = { index: child.path, path: route.path + ‘/’ + child.path, label: child.meta.title, aaaaa: child.meta.aaaaa, }; menu.push(menuItem); } } } } menuList.value = menu } function logOut() { userStore.logOut(); ElMessage.success(‘已退出登录’); router.push(‘/’); } </script> <style scoped> .layout-container-demo .el-header { position: relative; background-color: var(--el-color-primary-light-7); color: var(--el-text-color-primary); } .layout-container-demo .el-aside { color: var(--el-text-color-primary); background: var(--el-color-primary-light-8); height: 100vh; } .layout-container-demo .el-menu { border-right: none; } .layout-container-demo .el-main { padding: 0; } .layout-container-demo .toolbar { display: inline-flex; align-items: center; justify-content: center; height: 100%; right: 20px; } </style> 我想把 用户管理画面,项目一览画面,项目管理画面 ,障碍票一览画面,障碍票详细画面 加入上部导航栏中,然后在丰富一下画面内容 用<template>画

<template> <view class="h-full w-full bg-black-5 flex flex-col justify-stretch overflow-hidden"> <custom-nav-bar></custom-nav-bar> <view :style="{'background-image': cacheStore.historyPlays[0].al.picUrl?url(${cacheStore.historyPlays[0].al.picUrl}):'/static/logo.png'}" class="bg-60% bg-no-repeat absolute inset-0 w-full h-full object-cover scale-[1.1] blur-md overflow-hidden"> </view> <UserDetailTop class="z-10" :items="cacheStore.historyPlays[0]" :description="description"></UserDetailTop> <view class="z-20 rounded-tl-[18rpx] rounded-tr-[18rpx] bg-black-5 grow relative"> <view class="!h-full absolute left-0 right-0 bottom-0"> <Subtitle icon="icon-menu" icon-size="63rpx" class="!justify-end bg-black-5 px-[52rpx] h-[63rpx]" :style="{ top: 44 + useStatusBarHeight().value + 'px' }"> <template #title> <text class="text-grey-15 inline-block align-middle mr-[15rpx] font-[30rpx]"> 播放全部 </text> <view class="flex items-center h-[65rpx]"> <button class="h-[63rpx] w-[63rpx] m-0 rounded-full bg-blue-1 text-white-3 flex justify-center items-center" @tap="audioStore.onPlay(audioStore.mode === 'random' ? rangeRandom(0, cacheStore.historyPlays.length) : 0, cacheStore.historyPlays)"> <JIcon class="icon-ic_play_rc text-[42rpx]" /> </button> </view> </template> </Subtitle> <view class="box-border overflow-y-scroll h-full pt-[26rpx] pb-[var(--save-bottom)]"> el?.open()" class="h-full"> <view class="h-full animate-enter-content bg-black-5 px-[28rpx] after:block"> <Song v-for="(song, index) in cacheStore.historyPlays" :key="song.id" class="animate-content" :song="song" :is-play="audioStore.currentSongInfo?.song.id === song.id && audioStore.isPlay" :is-run="audioStore.currentSongInfo?.song.id === song.id" :cannot-play="audioStore.currentSongInfo?.song.id === song.id && !audioStore.currentSongInfo?.urlInfo.url" @click="audioStore.onPlay(index, cacheStore.historyPlays.slice())" /> </view> </view> </view> </view> </view> </template>

最新推荐

recommend-type

基于MatlabSimulink的纯电动汽车整车仿真模型设计与应用 MatlabSimulink 详细版

如何使用Matlab/Simulink构建纯电动汽车的整车仿真模型。首先阐述了仿真模型的重要性及其在纯电动汽车研发中的关键作用。接着分别讨论了电机模型、电池模型、变速器模型、驾驶员模型和整车动力学模型的具体构建方法和技术细节。每个模型都涵盖了其主要特性及模拟方式,如电机的电气、机械和热特性,电池的电压、电流和温度特性,变速器的齿轮比和传动效率,驾驶员的行为和反应,以及整车的纵向和横向动力学特性。最后,通过整合各子模型并进行仿真测试,展示了如何评估和优化纯电动汽车的整体性能。 适合人群:从事新能源汽车研究的技术人员、高校相关专业师生、汽车行业工程师。 使用场景及目标:适用于需要深入了解纯电动汽车内部机制的研究项目,旨在提高车辆性能、延长续航里程、增强安全性和优化设计流程。 其他说明:文中不仅提供了详细的理论解释,还附有实际操作步骤和案例分析,帮助读者全面掌握仿真建模的方法论。
recommend-type

langchain4j-community-neo4j-retriever-1.0.1-beta6.jar中文文档.zip

1、压缩文件中包含: 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法: 解压最外层zip,再解压其中的zip包,双击 【index.html】 文件,即可用浏览器打开、进行查看。 3、特殊说明: (1)本文档为人性化翻译,精心制作,请放心使用; (2)只翻译了该翻译的内容,如:注释、说明、描述、用法讲解 等; (3)不该翻译的内容保持原样,如:类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示: (1)为了防止解压后路径太长导致浏览器无法打开,推荐在解压时选择“解压到当前文件夹”(放心,自带文件夹,文件不会散落一地); (2)有时,一套Java组件会有多个jar,所以在下载前,请仔细阅读本篇描述,以确保这就是你需要的文件。 5、本文件关键字: jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
recommend-type

粒子群算法优化离网风光发电储能系统容量配置:混合储能与惯性权重调整 粒子群算法

内容概要:本文探讨了粒子群算法(PSO)在离网风光发电储能系统中的应用,旨在实现全生命周期费用最小化。研究采用了蓄电池与超级电容混合储能系统,通过改变惯性权重和实施超级电容优先放电策略来优化容量配置。首先介绍了混合储能系统的优点及其在平衡风光发电波动性和提高供电可靠性方面的作用。接着详细阐述了粒子群算法的工作原理,包括模型建立、算法初始化、适应度评估、粒子更新与迭代等步骤。最后通过实验验证了该方法的有效性,结果显示随着迭代次数的增加,优化效果更为显著,不仅降低了全生命周期费用,还减少了缺电功率。 适合人群:对新能源发电系统、储能技术和优化算法感兴趣的科研人员和技术开发者。 使用场景及目标:适用于离网风光发电系统的规划与设计,帮助决策者选择最佳的储能设备组合,降低运营成本并提升系统性能。 其他说明:文中提到的方法和策略对于理解和改进现有风光发电储能系统具有重要价值,同时也为未来的相关研究提供了有益的参考。
recommend-type

年轻时代音乐吧二站:四万音乐与图片资料库

根据提供的信息,我们可以梳理出以下知识点: ### 知识点一:年轻时代音乐吧二站修正版 从标题“年轻时代音乐吧二站修正版”可以推断,这是一个与音乐相关的网站或平台。因为提到了“二站”,这可能意味着该平台是某个项目或服务的第二代版本,表明在此之前的版本已经存在,并在此次发布中进行了改进或修正。 #### 描述与知识点关联 描述中提到的“近四万音乐数据库”,透露了该音乐平台拥有一个庞大的音乐库,覆盖了大约四万首歌曲。对于音乐爱好者而言,这表明用户可以访问和欣赏到广泛和多样的音乐资源。该数据库的规模对于音乐流媒体平台来说是一个关键的竞争力指标。 同时,还提到了“图片数据库(另附带近500张专辑图片)”,这暗示该平台不仅提供音乐播放,还包括了视觉元素,如专辑封面、艺人照片等。这不仅增强了用户体验,还可能是为了推广音乐或艺人而提供相关视觉资料。 ### 知识点二:下载 影音娱乐 源代码 源码 资料 #### 下载 “下载”是指从互联网或其他网络连接的计算机中获取文件的过程。在这个背景下,可能意味着用户可以通过某种方式从“年轻时代音乐吧二站修正版”平台下载音乐、图片等资源。提供下载服务需要具备相应的服务器存储空间和带宽资源,以及相应的版权许可。 #### 影音娱乐 “影音娱乐”是指以音频和视频为主要形式的娱乐内容。在这里,显然指的是音乐吧平台提供的音乐播放服务,结合上述的图片数据库,该平台可能还支持视频内容或直播功能,为用户提供丰富的视听享受。 #### 源代码 提到“源代码”和“源码”,很可能意味着“年轻时代音乐吧二站修正版”可能是开源的,或者是该平台允许用户下载其应用程序的源代码。在开源的情况下,开发者社区可以查看、修改和分发源代码,促进更多人参与到平台的建设和改进中。 #### 资料 “资料”则指的是与音乐相关的各种信息资料,如歌词、艺人介绍、音乐评论等。该音乐平台可能提供了丰富的背景信息资料,帮助用户更深入地了解音乐及其背后的故事。 ### 知识点三:压缩包子文件的文件名称列表 文件名称列表中仅提到了“年轻时代音乐吧二站修正版”,这可能暗示着整个平台或其下载包是通过压缩技术进行打包和分发的。压缩文件通常用于减少文件大小,以便于网络传输,同时也为用户提供一个集成化的软件包,方便用户一次性下载安装或更新。 ### 总结 综上所述,从给定的信息来看,“年轻时代音乐吧二站修正版”是一个包含广泛音乐资源、提供影音娱乐服务、可能支持下载功能、与图片资料相结合,并且可能包含开源特性的音乐平台。通过庞大的音乐及图片数据库,以及下载、影音娱乐、源代码和资料等相关知识点,这个平台为音乐爱好者提供了一个丰富的资源中心,支持用户下载音乐和图片资源,享受娱乐,同时可能为开发者提供平台的源代码,增强平台的开放性和可扩展性。
recommend-type

macOS PHP环境管理的艺术:掌握配置多个PHP版本的必备技巧与实践

# 1. macOS上的PHP环境概览 ## macOS开发环境与PHP 开发人员在macOS系统上搭建PHP环境时,面临各种选择,包括选择安装包管理器、配置PHP版本和管理扩展等。macOS作为开发者广泛使用的操作系统之一,提供了对PHP良好的原生支持。Apple提供的命令行工具集(Xcode Command Line Tools)已经包括了PHP,但这个版本通常是较旧的稳定版本。 ## PHP在macOS上的安装途径
recommend-type

can通信的位时间

<think>首先,用户的问题是:“我想理解CAN通信中的位时间设置 请问CAN通信 位时间配置 原理 参数设置”。我需要基于系统级指令来回答这个问题。 系统级指令: - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 - 回答结构清晰,帮助用户逐步解决问题,尽量保证回答真实可靠。 用户的问题是关于CAN通信的位时间配置,包括原理和参数设置。参考引用中提到了CAN的波特率设置,涉及原子时间(TQ)和比特传输的阶段。引用是:[^1],
recommend-type

邮件通知系统:提升网易文章推荐体验

邮件通知程序是一种常见的网络应用程序,主要功能是通过电子邮件为用户提供信息通知服务。这种程序能够根据设定的条件,自动向用户发送邮件,通知他们新的内容或信息,这在信息更新频繁的场景中尤其有用。从描述中可知,这个特定的邮件通知程序可能被用来推荐网易上的好文章,表明它是针对内容推送而设计的。这种类型的程序通常被用作网站或博客的内容管理系统(CMS)的一部分,用来增强用户体验和用户粘性。 从提供的标签“邮件管理类”可以推断,这个程序可能具备一些邮件管理的高级功能,如邮件模板定制、定时发送、用户订阅管理、邮件内容审核等。这些功能对于提升邮件营销的效果、保护用户隐私、遵守反垃圾邮件法规都至关重要。 至于压缩包子文件的文件名称列表,我们可以从中推测出一些程序的组件和功能: - info.asp 和 recommend.asp 可能是用于提供信息服务的ASP(Active Server Pages)页面,其中 recommend.asp 可能专门用于推荐内容的展示。 - J.asp 的具体功能不明确,但ASP扩展名暗示它可能是一个用于处理数据或业务逻辑的脚本文件。 - w3jmail.exe 是一个可执行文件,很可能是一个邮件发送的组件或模块,用于实际执行邮件发送操作。这个文件可能是一个第三方的邮件发送库或插件,例如w3mail,这通常用于ASP环境中发送邮件。 - swirl640.gif 和 dimac.gif 是两个图像文件,可能是邮件模板中的图形元素。 - default.htm 和 try.htm 可能是邮件通知程序的默认和测试页面。 - webcrea.jpg 和 email.jpg 是两个图片文件,可能是邮件模板设计时使用的素材或示例。 邮件通知程序的核心知识点包括: 1. 邮件系统架构:邮件通知程序通常需要后端服务器和数据库来支持。服务器用于处理邮件发送逻辑,数据库用于存储用户信息、订阅信息以及邮件模板等内容。 2. SMTP 协议:邮件通知程序需要支持简单邮件传输协议(SMTP)以与邮件服务器通信,发送邮件到用户指定的邮箱。 3. ASP 编程:由于提及了ASP页面,这表明开发邮件通知程序可能用到 ASP 技术。ASP 允许在服务器端执行脚本以生成动态网页内容。 4. 邮件内容设计:设计吸引人的邮件内容对于提高用户互动和兴趣至关重要。邮件模板通常包括文本、图片、链接,以及可能的个性化元素。 5. 用户订阅管理:邮件通知程序需要提供用户订阅和退订的功能,以便用户可以控制他们接收到的信息类型和数量。 6. 邮件发送策略:为了遵守反垃圾邮件法律并提高邮件送达率,邮件通知程序需要实现合理的发送策略,例如定时发送、避免过度发送、邮件列表管理等。 7. 安全性和隐私保护:发送邮件时需要确保邮件内容的安全性和用户隐私,避免敏感信息泄露,并且遵守相关的数据保护法律和规范。 8. 性能优化:邮件通知程序需要有效地处理大量用户的邮件发送请求,保证邮件发送的高效性,并且优化系统性能以应对高峰时段。 9. 用户体验:良好的用户体验设计能够增加用户的互动和满意度,包括清晰的订阅界面、灵活的邮件设置选项、易于理解的通知内容等。 10. 反馈机制:用户对邮件的反馈,如打开率、点击率和退订率,是衡量邮件通知程序效果的重要指标。有效的反馈机制可以帮助改进邮件内容和发送策略。 通过了解这些知识点,我们可以对邮件通知程序的设计、开发和运作有更全面的认识。
recommend-type

【macOS PHP开发环境搭建新手必备】:使用brew一步到位安装nginx、mysql和多版本php的终极指南

# 1. macOS PHP开发环境概述 ## macOS下PHP开发的重要性 在macOS上设置PHP开发环境是开发高效Web应用程序的关键。macOS为开发者提供了一个稳定且用户友好的操作系统环境,结合了Unix的强大功能和苹果的直观界面设计。由于其Linux类似的核心,macOS常被视为Web开发的理想平台,特别是在搭
recommend-type

windows AD 组策略设置的时候是建议一个功能新建一条组策略么?还是在默认组策略上设置

<think>嗯,用户问的是在Windows AD组策略设置时,是建议每个功能新建一条组策略,还是直接在默认域策略上修改。这个问题涉及到AD管理的最佳实践。 从企业管理的角度思考,默认域策略(Default Domain Policy)作为AD安装时自动生成的策略,其实承担着基础安全配置的角色,比如密码策略、账户锁定策略这些关键设置。如果在这上面随意修改,风险确实很高——万一配置出错会影响整个域的用户和计算机。 我记得微软官方文档特别强调过要保护默认域策略。实际操作中,更合理的做法是针对不同的管理目标创建专用的组策略对象(GPO)。比如单独为"驱动器映射"、"IE安全设置"或"屏幕锁定超时
recommend-type

文件分割神器:快速压缩与管理大文件

标题《快刀斩乱麻》描述了一款文件分割软件的功能和特点。从描述中我们可以提炼出以下几个重要的知识点: 1. 文件分割功能:软件的主要用途是将一个大型文件分割成多个较小的部分。在早期计算机时代,由于存储介质(如软盘)的容量有限,常常需要将大文件拆分存储。而今,这种需求可能在移动存储设备空间受限或网络传输带宽有限的情况下仍然存在。 2. 文件管理:分割后的文件会被放置在新建的文件夹中,使得用户能够轻松管理和查看这些文件片段。这是软件为用户考虑的一个贴心功能,提高了文件的可访问性和组织性。 3. 文件合并功能:在需要的时候,用户可以将分割后的文件重新组合成原始大文件。这一功能确保了文件的完整性,方便用户在需要使用完整文件时能够快速还原。 4. 硬盘空间节省:分割并合并文件后,软件提供了一键删除输出文件的功能,以减少不必要的硬盘占用。这对于硬盘空间紧张的用户来说是非常实用的功能。 5. MP3片段提取:软件能够提取MP3文件的片段,并且从指定位置开始播放,这为音乐爱好者提供了方便。此功能可能涉及音频文件的编辑和处理技术。 6. 批处理功能:支持同时处理多个文件的分割任务。此功能可以提高处理多个大型文件时的工作效率,节省用户的时间和劳动。 7. 界面与易用性:描述中提到该软件拥有一个美观的用户界面,并且非常容易使用,即使是初次使用也能快速掌握。这对于非技术用户来说至关重要,因为它降低了使用软件的技术门槛。 8. 应用场景:软件可以在磁盘空间不足时成为用户的得力助手。这表明软件可以解决一些实际问题,满足用户特定的需求。 【压缩包子文件的文件名称列表】中包含的setup.exe文件名暗示这是一个安装程序,用户通过运行该程序可以在计算机上安装“快刀斩乱麻”软件。而readme.txt通常是一个说明文档,包含了软件的安装指南、功能介绍、操作说明或版权信息等,方便用户在安装或使用软件时查阅相关信息。 总结来说,【标题】中所述的“快刀斩乱麻”是一款针对文件分割和管理任务而设计的软件,具备文件分割、管理、合并、空间节省、音频处理和批处理等实用功能,界面设计简洁且用户友好,适用于多种场景下对文件进行高效管理。