博客前端项目学习day03——框架页

  1. 更新router,实现导航栏功能
    在这里插入图片描述
  2. 框架页分为多个部分,头部,头部包含logo以及用户信息,左端是导航栏,右端是导航栏对应的内容
    头部如下,
    在这里插入图片描述
    左端是导航栏如下,

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

框架页代码

<template><div class="layout"><el-container ><el-header class="header"><div class="logo">Blog</div><div class="user-info"><span>欢迎回来,</span><el-dropdown trigger="click"><span class="nick-name">{{userInfo.nickName}}<span class="iconfont icon-close"></span></span><template #dropdown><el-dropdown-menu><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></template></el-dropdown><div class="avatar"><img :src="userInfo.avatar"></div></div></el-header><el-container class="container"><el-aside width="200px"class="left-aside"><div><el-button class="post-btn">发布</el-button></div><div class="menu-panel"><ul><li v-for="(menu,index) in menuList" v-bind:key="menu"><span class="menu-title-p" @click="openClose(index)"><span :class="['iconfont',menu.icon]"></span><span class="menu-title">{{menu.title}}</span><span :class="['iconfont','open-close',menu.open?'icon-open':'icon-close']"></span></span><ul class="sub-menu" v-show="menu.open"><li v-for="subMenu in menu.children"v-bind:key="subMenu"><router-link :to="subMenu.path":class="['sub-menu-item',activePath==subMenu.path?'active':'']">{{subMenu.title}}</router-link></li></ul></li></ul></div></el-aside><el-main class="right-main"><router-view/></el-main></el-container>
</el-container></div>
</template><script setup>
import {useRouter,useRoute} from 'vue-router'
import VueCookies from 'vue-cookies'
import {getCurrentInstance, ref,watch} from "vue"
import { ArrowDown } from '@element-plus/icons-vue'
const {proxy} = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const menuList = ref([{title: "博客",icon: "icon-blog",open: true,children: [{title: "博客管理",path: "/blog/list",},{title: "分类管理",path: "/blog/category",},],},{title: "专题",icon: "icon-zhuanti",open: true,children: [{title: "专题管理",path: "/special/list",},],},{title: "设置",icon: "icon-settings",open: true,children: [{title: "个人信息设置",path: "/settings/my",},{title: "博客成员",path: "/settings/user",},{title: "系统设置",path: "/settings/sysInfo",roleType: 1,},],},{title: "回收站",icon: "icon-delete",open: true,children: [{title: "回收站",path: "/recovery/list",},],},
]);const openClose =(index)=>{const open = menuList.value[index].open;menuList.value[index].open=!open;
}
const userInfo=ref({});
const init=()=>{userInfo.value=VueCookies.get("userInfo");userInfo.value.avatar = proxy.globalInfo.imageUrl+userInfo.value.avatar;
}
init();
const activePath = ref(null);
watch(route,(newVal,oldVal)=>{activePath.value=newVal.path;
},{immediate:true,deep:true});
</script><style lang="scss">
.layout{.header{border-bottom: 1px solid #ddd;display:flex;align-items: center;justify-content: space-between;.logo{font-size: 20px;}.user-info{display: flex;align-items: center;.nick-name{cursor: pointer;color:rgb(76, 187, 231);.icon-close{font-size:14px;}.avatar{margin-left: 10px;width:50px;border-radius: 25px;img{width:100%;}}}}}.container{padding-top:10px;background: #f5f6f7;height: calc(100vh - 60px);.left-aside{padding-left:15px;padding-right:15px;width:250px;.post-btn{background: green;color:#fff;height:40px;width:100%;}.menu-panel{margin-top:5px;ul,li{padding: 0px;margin: 0px;list-style: none;}.menu-title-p{padding:0px 5px;line-height:40px;cursor: pointer;display: flex;.iconfont{font-size:18px;color: #91949a;}.menu-title{flex:1;color: #3f4042;margin-left: 5px;}.open-close{font-size:16px;width:20px;}}.menu-title-p:hover{background: #ddd;}.sub-menu{padding-left: 20px;font-size: 14px;.sub-menu-item{padding:0px 10px;display:block;line-height: 30px;text-decoration: none;color:#3f4042;}.active{}.sub-menu-item:hover{background: #ddd;}}}}.right-main{background: #fff;}}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/380481.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows中使用Jenkins打包,部署vue项目完整操作流程

文章目录 1. 下载和安装2. 使用1. 准备一个 新创建 或者 已有的 Vue项目2. git仓库3. 添加Jenkinsfile文件4. 成功示例 1. 下载和安装 网上有许多安装教程,简单罗列几个 Windows系统下Jenkins安装、配置和使用windows安装jenkins 2. 使用 在Jenkins已经安装的基础上,可以开始下…

2024-07-19 Unity插件 Odin Inspector10 —— Misc Attributes

文章目录 1 说明2 其他特性2.1 CustomContextMenu2.2 DisableContextMenu2.3 DrawWithUnity2.4 HideDuplicateReferenceBox2.5 Indent2.6 InfoBox2.7 InlineProperty2.8 LabelText2.9 LabelWidth2.10 OnCollectionChanged2.11 OnInspectorDispose2.12 OnInspectorGUI2.13 OnIns…

高数知识补充----矩阵、行列式、数学符号

矩阵计算 参考链接&#xff1a;矩阵如何运算&#xff1f;——线性代数_矩阵计算-CSDN博客 行列式计算 参考链接&#xff1a;实用的行列式计算方法 —— 线性代数&#xff08;det&#xff09;_det线性代数-CSDN博客 参考链接&#xff1a;行列式的计算方法(含四种&#xff0c;…

08.固定宽高比 图片加载失败时的回退方案 隐藏滚动条

### 固定宽高比 确保具有可变 width 的元素将保持与其 `height 成比例的值。 在 ::before 伪元素上应用 padding-top,使元素的 height 等于其 width 的百分比。height 与 width 的比例可以根据需要进行调整。例如,padding-top 为 100% 将创建一个响应式正方形(1:1 比例)。<…

<数据集>钢铁缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1800张 标注数量(xml文件个数)&#xff1a;1800 标注数量(txt文件个数)&#xff1a;1800 标注类别数&#xff1a;6 标注类别名称&#xff1a;[crazing, patches, inclusion, pitted_surface, rolled-in_scale, scr…

<数据集>铁轨缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;844张 标注数量(xml文件个数)&#xff1a;844 标注数量(txt文件个数)&#xff1a;844 标注类别数&#xff1a;3 标注类别名称&#xff1a;[Spalling, Squat, Wheel Burn] 序号类别名称图片数框数1Spalling3315522…

前端组件化技术实践:Vue自定义顶部导航栏组件的探索

摘要 随着前端技术的飞速发展&#xff0c;组件化开发已成为提高开发效率、降低维护成本的关键手段。本文将以Vue自定义顶部导航栏组件为例&#xff0c;深入探讨前端组件化开发的实践过程、优势以及面临的挑战&#xff0c;旨在为广大前端开发者提供有价值的参考和启示。 一、引…

安全防御2

实验要求&#xff1a; 实验过程&#xff1a; 7&#xff0c;办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换)&#xff1a; 新建电信区&#xff1a; 新建移动区&#xff1a; 将对应接口划归到各自区域&#xff1a; 新建…

5.java操作RabbitMQ-简单队列

1.引入依赖 <!--rabbitmq依赖客户端--> <dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId> </dependency> 操作文件的依赖 <!--操作文件流的一个依赖--> <dependency><groupId>c…

前端表格解析方法

工具类文件 // fileUtils.tsimport { ref } from vue; import * as xlsx from xlsx;interface RowData {[key: string]: any; }export const tableData ref<RowData[]>([]);export async function handleFileSelect(url: string): Promise<void> {try {const res…

数字通云平台 智慧政务OA PayslipUser SQL注入漏洞复现

0x01 产品简介 数字通云平台智慧政务OA产品是基于云计算、大数据、人工智能等先进技术,为政府部门量身定制的智能化办公系统。该系统旨在提高政府部门的办公效率、协同能力和信息资源共享水平,推动电子政务向更高层次发展。 0x02 漏洞概述 数字通云平台 智慧政务OA Paysli…

使用shedlock实现分布式互斥执行

前言 前序章节&#xff1a;springboot基础(82):分布式定时任务解决方案shedlock 如果你不清楚shedlock&#xff0c;建议先阅读前序章节&#xff0c;再来查看本文。 如果我们不在spring环境下&#xff0c;如何使用shedlock实现分布式互斥执行&#xff1f; 我们可以使用shedl…

verilog实现ram16*8 (vivado)

module ram_16x2 (input clk, // 时钟信号input we, // 写使能input en, // 使能信号input [3:0] addr, // 地址线input [1:0] datain, // 输入数据线output reg [1:0] dataout // 输出数据线 );// 定义存储器数组reg [1:0] mem [15:0];always (posedge…

知迪科技发布了全新软件产品

近日&#xff0c;知迪科技发布了全新软件产品——Vehicle Bus Tool-Trace Version免费版。该软件产品能高效的离线分析汽车总线数据&#xff0c;并拥有一大亮点功能&#xff1a;Ethernet通信离线文件基于ARXML文件的信号级解析&#xff0c;具体操作如下&#xff1a; 1、新建一…

达梦数据库 MPP集群搭建(带主备)

MPP集群搭建&#xff08;带主备&#xff09; 1.背景2.操作内容和要求3. 具体步骤3.1 搭建过程3.1.1 集群搭建3.1.2 准备工作3.1.2.1 初始化3.1.2.2 备份数据库 3.1.3 配置主库EP013.1.3.1 配置dm.ini3.1.3.2 配置dmmal.ini3.1.3.3 配置dmarch.ini3.1.3.4 配置dmmpp.ctl3.1.3.5 …

PHP基础语法(一)

一、初步语法 1、PHP代码标记&#xff1a;以 <?php 开始&#xff0c;以 ?> 结束&#xff1b; 2、PHP注释&#xff1a;行注释&#xff1a;//&#xff08;双斜杠&#xff09;或# 块注释&#xff1a;/* */ 3、PHP语句分隔符&#xff1a; 1&#xff09;在PHP中&#…

Golang|Shopee一面

1、一个有环的链表&#xff0c;如何确认链表有环&#xff0c;环的长度。 LeetCode 142。原题为判断链表是否有环&#xff0c;如果有环找到环的起点。本题修改为求环的长度&#xff0c;基本思路一致&#xff0c;依然为双指针。当快慢指针相遇之后&#xff0c;如果寻找环的起点&…

防火墙内容安全综合实验

一、实验拓扑 二、实验要求 1&#xff0c;假设内网用户需要通过外网的web服务器和pop3邮件服务器下载文件和邮件&#xff0c;内网的FTP服务器也需要接受外网用户上传的文件。针对该场景进行防病毒的防护。 2&#xff0c;我们需要针对办公区用户进行上网行为管理&#xff0c;要…

【LeetCode】翻转二叉树

目录 一、题目二、解法完整代码 一、题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root…

数据可视化配色新工具,颜色盘多达2500+类

好看的配色,不仅能让图表突出主要信息,更能吸引读者,之前分享过很多配色工具,例如, 👉可视化配色工具:颜色盘多达3000+类,数万种颜色! 本次再分享一个配色工具pypalettes,颜色盘多达2500+类。 安装pypalettes pip install pypalettes pypalettes使用 第1步,挑选…