首页 > 其他分享 >vue3 解决导航栏和header之间的空白

vue3 解决导航栏和header之间的空白

时间:2024-01-26 15:33:35浏览次数:40  
标签:header height 空白 vue3 解决 导航

vue3 解决导航栏和header之间的空白

现象

如下图所示,导航栏和header之间有白色空隙

 解决

components\CommonAside.vue 修改样式,添加如下代码

</style>
  .el-menu {
    height: 100vh;
    border-right: none;
    h3 {
      color: #fff;
      text-align: center;
      line-height: 48px;
    }
  }
</style>

代码效果

修改完成保存,解决白色空隙问题

 

标签:header,height,空白,vue3,解决,导航
From: https://www.cnblogs.com/weiweirui/p/17989522

相关文章

  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv
    使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:gitee.com/breezefaith…目录一、前言近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台......
  • 2024年1月Java项目开发指南10:vite+Vue3项目创建
    新建项目安装routernpminstallvue-router在src下新建目录router,在目录下新建index.js在index.js里面配置路由import{createRouter,createWebHistory}from'vue-router';//定义路由constroutes=[//在这里配置路由];//创建路由实例constrouter=......
  • Echarts5.0——点击还原按钮图形空白问题
    前言看下文档就可以知道问题出哪了,在setOption的时候配置下notMerge就好了,详细的可以访问文档自行查看;setOption:https://echarts.apache.org/zh/api.html#echartsInstance.setOption步骤this.chartInstance.setOption(this.option,true);render(){this.chartIns......
  • uniapp-vue3,封装类似于axios的请求方法
    request.jsimport{rootUrl}from"@/config/app-config.js"importhandleCachefrom'@/utils/cache/cache.js';import{showToast}from"@/utils/vant"import{clearAccountInfo}from'@/utils/clear/clear';import......
  • vue3 父子组件间的数据传递
    一、简介二、实际代码三、问题 一、简介vue父子组件的传递原则是单向的,子组件是无法修改父组件的参数,但是可以通过另一种渠道可以实现通信。       二、实际代码1父传子1.1 props 父组件内容<template><div>这里是父组件</div......
  • [Vue]Vue3学习笔记1
    官网文档: https://cn.vuejs.org/guide/essentials/template-syntax.html 每个组件都是由createApp创建import{createApp}from'vue'constapp=createApp({/*根组件选项*/}) Vue3.4+支持v-bind同名简写如果属性名称与要绑定的JavaScript值相同,语法可以......
  • vue3中使用animate.css+wow.js
    官网链接:animatewow.js版本声明:"dependencies":{"vue":"^3.3.11","animate.css":"^4.1.1","wow.js":"^1.2.2"},1.安装:npminstallanimate.css--savenpminstallwow.js......
  • js/ts中Date类的ref响应式 -- VUE3
    现象:Date对象无法响应式原因:Date是个深层对象,外面那层可以响应,但是更改里面的层,则不会被侦测到改动解决:强制触发副作用即可参考文档:https://cn.vuejs.org/api/reactivity-advanced.html#triggerref<template><divclass="cnblogs_yucloud">{{DateTime}}</div>......
  • vue3 axios 封装
    一、介绍二、代码三、问题 一、介绍Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。这里介绍的是在vue3中怎么封装二、代码1.基本使用1.1安装npminstallaxios1.2简单使用1.2.1局部使用importaxiosfrom'axio......
  • UniApp Vue3 动态表单
    左侧手机部分为动态表单内容,右侧为提交后获取到表单的值。页面代码:<viewstyle="margin:15px;padding:10rpx;"><tn-formlabel-position="top"ref="formRef":model="formData":rules="formRules"><tn-for......