若依(ruoyi)前端Vue3 Element Plus Vite版样式修改

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

这里主要是修改左侧面包屑旁边的显示/隐藏侧边栏SVG样式。以下是对代码的解释：

1. : 这是一个元素，应用了内联样式padding: 0 15px;，即左右内边距为15像素。@click="toggleClick"表示当这个被点击时，会触发Vue.js实例中的toggleClick方法。

2. • :class="{'is-active':isActive}": 动态地绑定class属性，根据isActive的值决定是否添加is-active类。这通常用于根据状态改变样式。

   • class="hamburger": 设置SVG图标的类为hamburger。

   • viewBox="0 0 1024 1024": 定义SVG图标的视图框，指定用户坐标系。

   • xmlns="http://www.w3.org/2000/svg": 设置SVG的XML命名空间。

   • width="64" height="64": 设置SVG图标的宽度和高度为64像素。

   • fill="#fff": 设置SVG图标的填充颜色为白色。

   • : 这是SVG路径元素，定义了图标的形状。具体的形状由d属性中的路径数据描述。

3. : 关闭SVG元素。

这段代码创建了一个包含SVG图标的元素，当这个元素被点击时，会触发Vue.js实例中的toggleClick方法，并根据isActive的值动态地添加或移除is-active类，改变SVG图标的样式。

2. sidebar字体样式

• 位置：src/assets/styles/sidebar.scss

• 加入以下样式：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

这段主要是修改sidebar字体样式，下面是对这段代码的解释：

1. .el-sub-menu: 这是 Element UI 中的一个类，通常用于表示一个包含子菜单的菜单项。这个类的样式规则是设置菜单项的字体粗细为 700（即加粗）并设置背景颜色为 #99a9bf。

2. .el-menu--vertical: 这是 Element UI 中的一个类，用于表示垂直布局的菜单。这个类的样式规则同样是设置字体粗细为 700 并设置背景颜色为 #99a9bf。

3. .el-menu-item: 这是 Element UI 中表示单个菜单项的类。样式规则同样是将字体粗细设置为 700 并设置背景颜色为 #99a9bf。

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

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

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

• 1

这段主要是修改全局tags标签按钮等背景色，具体解释如下：

• storageSetting.theme: 这是从某种存储（storage）中获取的主题设置值。
• ||: 这是 JavaScript 的逻辑或运算符。如果storageSetting.theme存在（非 falsy），那么它的值将被用作主题值。否则，如果storageSetting.theme为 falsy（例如，未定义或为 null），则使用默认值 '#409EFF'。

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

4. tags标签页样式

• 位置：src/layout/components/TagsView/index.vue
• 类名：.tags-view-container

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

这段主要是修改tags标签页样式，以下是对代码的解释：

1. .tags-view-container: 这是一个类选择器，用于选择 HTML 中具有 class="tags-view-container" 的元素。

2. height: 34px;: 设置元素的高度为34像素。

3. width: 100%;: 设置元素的宽度为100%。这使得该元素在其容器内占据整个宽度。

4. background: #fff;: 设置元素的背景色为白色。

5. border-bottom: 1px solid #d8dce5;: 设置元素底部边框为1像素的实线，颜色为 #d8dce5。

6. 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像素、颜色为浅灰色的阴影。

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

5. 表格样式

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

这段主要是修改表格的样式，以下是对代码的解释：

1. .el-table: 这是 Element UI 表格组件的类选择器，用于选择 HTML 中具有 class="el-table" 的元素。

2. .el-table__header-wrapper, .el-table__fixed-header-wrapper: 这是选择表格头部及固定头部的包装器元素。在这两个元素下，对表格头部样式进行了定义。

   • th: 这是表格头部单元格元素。对表格头部的样式进行了如下定义：

     • word-break: break-word;: 设置单元格中的单词换行，防止单词溢出单元格。

     • background-color: #f8f8f9 !important;: 设置表格头部的背景色为 #f8f8f9，使用 !important 来确保样式优先级。这个颜色设置似乎是为了适应深色模式，提供一种浅色的背景。

     • color: #515a6e;: 设置文字颜色为 #515a6e，一种深色调。

     • height: 40px !important;: 设置表格头部单元格的高度为40像素，使用 !important 来确保样式优先级。

     • font-size: 13px;: 设置字体大小为13像素。

3. .el-table__body-wrapper: 这是表格主体的包装器元素。在这个元素下，对一些按钮元素的样式进行了定义。

   • .el-button [class*="el-icon-"] + span: 这是选择表格主体中的带有 el-button 类的元素后面的相邻的 span 元素。对这些元素的样式进行了如下定义：

     • margin-left: 1px;: 设置左边距为1像素，调整这些按钮元素之间的间距。

6. 树形菜单选中样式

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

• 加入以下样式：

• 1
• 2
• 3
• 4
• 5

这段主要是修改树形菜单选中样式，以下是对代码的解释：

1. .el-tree--highlight-current: 这是一个类选择器，表示在 Element UI 树形组件中启用高亮显示当前节点的样式。

2. .el-tree-node.is-current: 这是选择具有 is-current 类的树节点。这表示当前被选中或高亮显示的节点。

3. >.el-tree-node__content: 这是选择树节点下属的 .el-tree-node__content 元素，即节点的内容容器。

4. 样式定义：

   • background-color: #43b3bb !important;: 设置当前节点的背景颜色为 #43b3bb，使用 !important 来确保样式优先级。这是一种蓝绿色调的颜色。

   • color: white;: 设置文字颜色为白色。

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