0512-53998127
- postmaster@dwoodauto.com
+ service@dwoodauto.com
7x24小时为您服务
@@ -27,12 +27,8 @@
-
-
- +
-
{{item.name}} @@ -58,24 +54,13 @@ {{menuName}} - + + /* 导航栏 每个导航下面的 a 链接 鼠标滑上去的样式 */ + #header .header-nav .header-nav-wrapper>li>a:hover { + color: #009688; + text-decoration: none; + } + + /* 导航栏 每个导航下面的 a 链接 鼠标滑上去下划线的样式 */ + #header .header-nav .header-nav-wrapper>li>a:hover .underline { + opacity: 1; + width: 100%; + left: 0; + } + + /* 导航栏 每个导航下面的 a 链接 鼠标滑上去三角标的样式 */ + #header .header-nav .header-nav-wrapper>li>a:hover span { + transform: rotate(180deg); + } + + /* 导航栏 每个导航下面的 a 链接 鼠标点击后的样式 */ + #header .header-nav .header-nav-wrapper>li.active>a { + color: #009688; + text-decoration: none; + border-bottom: 2px solid #009688; + } + + /* 导航栏 每个导航下面的二级导航容器 */ + #header .header-nav .header-nav-wrapper>li>dl { + display: none; + position: absolute; + width: 168px; + top: 80%; + left: 0; + z-index: 999999; + box-shadow: 0 0 3px 1px #ccc; + background: #fff; + } + + /* 导航栏 每个导航下面的二级导航容器的每个导航 */ + #header .header-nav .header-nav-wrapper>li>dl>dt { + width: 100%; + padding: 10px; + border-bottom: 1px solid #ccc; + } + + /* 导航栏 每个导航下面的二级导航容器的每个导航 当鼠标滑上时的样式*/ + #header .header-nav .header-nav-wrapper>li>dl>dt>a:hover { + text-decoration: none; + } + + /* 导航栏 滑上一级导航显示二级导航 */ + #header .header-nav .header-nav-wrapper>li:hover dl { + display: block; + } + + #header .header-nav .header-nav-wrapper>li>dl>dt:hover { + cursor: pointer; + background: #ccc; + } + + @media screen and (max-width: 997px) { + #header .header-nav-m { + position: relative; + } + + /* 导航栏logo容器 */ + #header .header-nav-m .header-nav-m-logo { + height: 70px; + position: relative; + display: flex; + align-items: center; + justify-content: center; + } + + /* 导航栏logo图片 */ + #header .header-nav-m .header-nav-m-logo img { + width: 50px; + height: 50px; + margin: 0; + } + + #header .header-nav-m .header-nav-m-logo .logo-text { + margin-left: 15px; + } + + #header .header-nav-m .header-nav-m-logo .logo-text .text-name { + margin-bottom: 5px; + font-size: 16px; + } + + #header .header-nav-m .header-nav-m-logo .logo-text .text { + margin-bottom: 0; + margin-top: 5px; + font-size: 12px; + } + + /* 导航栏 菜单容器 */ + #header .header-nav-m .header-nav-m-menu { + color: #fff; + font-size: 14px; + line-height: 50px; + background: #474747; + position: relative; + } + + /* 导航栏 菜单图标 */ + #header .header-nav-m .header-nav-m-menu-wrapper { + position: absolute; + top: 50%; + left: 10px; + margin-top: -20px; + width: 40px; + height: 40px; + color: #fff; + z-index: 999999; + font-size: 14px; + display: flex; + align-items: center; + justify-content: center; + } + + /* 导航栏 */ + #header .header-nav-m .header-nav-m-wrapper { + position: absolute; + top: 50px; + left: 0; + width: 100%; + background: #474747; + z-index: 9999999; + } + + /* 导航栏 每个导航 */ + #header .header-nav-m .header-nav-m-wrapper>li { + padding: 0; + border-top: 1px solid #ccc; + } + + /* 导航栏 每个导航下面的 a 链接 */ + #header .header-nav-m .header-nav-m-wrapper>li>a { + color: #fff; + font-size: 14px; + font-weight: bold; + position: relative; + width: 100%; + padding: 0 20px; + display: inline-block; + } + + /* 导航栏 每个导航下面的 a 链接的右侧小三角 */ + #header .header-nav .header-nav-wrapper>li>a>span { + font-size: 10px; + } + } + \ No newline at end of file diff --git a/src/view/HomePage.vue b/src/view/HomePage.vue index c28b834..ba439e7 100644 --- a/src/view/HomePage.vue +++ b/src/view/HomePage.vue @@ -8,19 +8,19 @@
+