vue部署样式错乱

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
.submenu {
  float: right;
}

.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}

.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}

.showimg:active {
  border: none;
}

/deep/ .el-header {
  padding: 0px;
}
</style>
引用外部组件，并要修改外部组件在当前组件的css样式时，需要在style标签加上scoped，当 style标签有 scoped属性时，它的 CSS 只作用于当前组件中的元素。
vue部署到服务器如下图：

在本地运行时如下图：