若依前端 Vue3 样式修改（278）

1. sidebar字体样式

位置：src/assets/styles/sidebar.scss
加入以下样式：

// sidebar 菜单
.el-sub-menu,
.el-menu--vertical {
  font-weight: 700;
  background: #99a9bf;
}
.el-menu-item {
  font-weight: 700;
  background: #99a9bf;
}

这段代码设置了 Element UI 的菜单和菜单项的样式，使它们在垂直布局时字体加粗，背景颜色为 #99a9bf。用于调整 Element UI菜单的外观，以满足特定设计需求。

2. 全局tags标签按钮等背景色

位置：src/store/modules/settings.js

theme: storageSetting.theme || '#409EFF',

这行代码的作用是设置主题值为存储中的主题（如果存在），否则使用默认的主题颜色'#409EFF'。这种设置允许根据存储中的值或默认值动态选择主题。

3. tags标签页样式

位置：src/layout/components/TagsView/index.vue

类名：.tags-view-container

.tags-view-container {
  height: 34px;
  width: 100%;
  // 背景色
  background: #fff;
  // 下边框
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);: 设置元素的阴影效果。这里使用了两个阴影层，第一个层表示较深的阴影，第二个层表示较浅的阴影。
具体参数如下：
– 0 1px 3px 0 rgba(0, 0, 0, 0.12): x 偏移为0、y 偏移为1像素、模糊半径为3像素、颜色为深灰色的阴影。
– 0 0 3px 0 rgba(0, 0, 0, 0.04): 没有偏移、没有y偏移、模糊半径为3像素、颜色为浅灰色的阴影。

这段代码定义了一个具有特定样式的容器，用于显示标签视图。这个容器具有一定的高度、宽度，白色背景，底部有细边框，并且带有一定的阴影效果，使得在界面上看起来更具立体感。

4. 表格样式

位置：src/assets/styles/ruoyi.scss

.el-table {
    .el-table__header-wrapper, .el-table__fixed-header-wrapper {
        // 表格头
        th {
            word-break: break-word;
            // 如果用的plus的深色模式，直接吧!important删掉，或者背景色直接删掉
            background-color: #f8f8f9 !important;
            color: #515a6e;
            height: 40px !important;
            font-size: 13px;
        }
    }
    .el-table__body-wrapper {
        .el-button [class*="el-icon-"] + span {
            margin-left: 1px;
        }
    }
}

5. 树形菜单选中样式

位置： src/assets/styles/ruoyi.scss

加入以下样式：

//树形选中菜单样式

 .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
     background-color: #43b3bb !important;
     color: white;
 }

代码解析：
– .el-tree--highlight-current: 这是一个类选择器，表示在 Element UI 树形组件中启用高亮显示当前节点的样式。
– .el-tree-node.is-current: 这是选择具有 is-current 类的树节点。这表示当前被选中或高亮显示的节点。
– .el-tree-node__content: 这是选择树节点下属的 .el-tree-node__content 元素，即节点的内容容器。

这段代码定义了当树形组件启用高亮显示当前节点时，当前节点的背景颜色将变为蓝绿色，并且文字颜色为白色。这样的设计使得当前节点在整体树结构中更为突出。

开发喵星球