- 位置：src/layout/components/Navbar.vue
- 类名：.navbar
// 比如背景色等
background: #1b2535;
RGB、RGBA或HSL等其他表示颜色的方式。这段主要是修改右侧的图标，隐藏、全屏等方法：
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
font-size: 18px;
color: #5a5e66;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
.right-menu-item: 这是一个类选择器，用于选择HTML中具有class="right-menu-item"的元素。
display: inline-block;: 设置元素的显示类型为inline-block，使其既具有块级元素的特性，又可以在水平方向上排列，类似于行内元素。
padding: 0 8px;: 设置元素的内边距，上下边距为0，左右边距为8像素。
height: 100%;: 设置元素的高度为父元素的100%。
font-size: 18px;: 设置字体大小为18像素。
color: #5a5e66;: 设置文字颜色为#5a5e66，这是一个灰色调。
vertical-align: text-bottom;: 设置垂直对齐方式为文本底部。
&.hover-effect: 这是一个带有类选择器的嵌套规则，选择具有class="hover-effect"的.right-menu-item元素。
cursor: pointer;: 当鼠标悬停在元素上时，将鼠标光标样式设置为指针，表示该元素可点击。
transition: background 0.3s;: 添加一个过渡效果，使背景颜色的变化在0.3秒内平滑进行。
&:hover: 这是一个伪类选择器，表示当鼠标悬停在.right-menu-item.hover-effect元素上时应用以下样式。
background: rgba(0, 0, 0, 0.025);: 设置悬停时的背景颜色为带有轻微透明度的黑色。
总的来说，这段代码定义了一个样式，用于渲染页面中的某些菜单项。这些菜单项在正常状态下具有一些基本样式，而在悬停时，会应用一些带有渐变效果的样式，以提供视觉反馈。
位置： src/assets/styles/element-ui.scss
加入以下样式：
// 下拉菜单
.el-dropdown__popper {
.el-scrollbar {
padding: 5px;
.el-dropdown-menu {
.el-dropdown-menu__item {
border-radius: 5px;
font-weight: 700;
//字体颜色
color: rgb(255, 255, 255);
&:hover {
//鼠标移入背景色
background-color: #99a1a2;
}
}
}
}
}
.el-dropdown__popper: 这是一个类选择器，用于选择HTML中具有class="el-dropdown__popper"的元素。
.el-scrollbar: 这是一个嵌套的类选择器，选择.el-dropdown__popper元素下的.el-scrollbar元素。
padding: 5px;: 设置.el-scrollbar元素的内边距为5像素
.el-dropdown-menu: 选择.el-scrollbar元素下的.el-dropdown-menu元素。
.el-dropdown-menu__item: 选择.el-dropdown-menu元素下的.el-dropdown-menu__item元素。
border-radius: 5px;: 设置.el-dropdown-menu__item元素的边框半径为5像素，使其具有圆角。
font-weight: 700;: 设置字体粗细为700（加粗）。
color: rgb(255, 255, 255);: 设置文字颜色为白色。
&:hover: 表示当鼠标悬停在.el-dropdown-menu__item元素上时应用以下样式。
background-color: #99a1a2;: 设置悬停时的背景颜色为#99a1a2。
- 位置：src/components/Breadcrumb/index.vue
<!-- <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> -->
<!-- 将a标签修改成span标签,并添加一个has-redirect样式 -->
<span class="has-redirect" v-else @click.prevent="handleLink(item)">
- 样式：
.has-redirect,
.no-redirect {
color: #dcdcdc;
cursor: default;
font-weight: 700;
}
.has-redirect {
color: #ffffff;
cursor: pointer;
}
- 位置：src/components/Hamburger/index.vue
<div style="padding: 0 15px;" @click="toggleClick">
<svg
:class="{'is-active':isActive}"
class="svgtitle"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
fill="#fff"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
</svg>
</div>
代码解析：
<svg ...>: 这是一个SVG图标，包含了路径（<path>...</path>）元素。以下是对SVG图标的一些属性的解释：
:class="{'is-active':isActive}": 动态地绑定class属性，根据isActive的值决定是否添加is-active类。这通常用于根据状态改变样式。
class="svgtitle": 设置SVG图标的类为svgtitle。
viewBox="0 0 1024 1024": 定义SVG图标的视图框，指定用户坐标系。
xmlns="http://www.w3.org/2000/svg": 设置SVG的XML命名空间。
width="64" height="64": 设置SVG图标的宽度和高度为64像素。
fill="#fff": 设置SVG图标的填充颜色为白色。
<path d="..."/>: 这是SVG路径元素，定义了图标的形状。具体的形状由d属性中的路径数据描述。
以上是对若依框架中导航栏样式的一些自定义操作。
powered by kaifamiao