vue鼠标滚动切换页面导航栏点击切换页面悬浮小圆点切换页面默认选中第一项滚动还是点击都会选中停留所在页面

screenWeight

类似走马灯的切换页面 代码基本上基于下链接的博主 自己增加了一点点小内容
https://blog.csdn.net/Lccccb/article/details/104671115
继续赶项目了…有问题评论或私信 有机会再改善一下
shift+alt+f 代码格式化 排版更整齐
红色拖影是hover属性 点击才有 一开始没有是因为两种情况 一、鼠标滚动切换网页 二、点击顶部导航栏
颜色改变顶部和dot导航栏一致 对应导航所在位置有对应颜色

style.css

#app {
    font-size: 0;
    width: 100%;
}

.nav {
    width: 100%;
    height: 50px;
    background-color: #0A0F24;
    display: inline-flex;
    flex-direction: row;
    position: fixed;
    top: 0;
}

.nav a {
    color: white;
}

.router-link-active {
    text-decoration: none;
}

.citySeven {
    display: inline-block;
    width: 50%;
    height: 50px;
    background: url('./img/logo.png')10px no-repeat;
    background-size: 50% 33px;
}

.citySeven_nav {
    width: 35%;
    height: 50px;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 10px;
    white-space: nowrap;
    font-weight: lighter;
}

.citySeven_nav li {
    color: white;
}

.dot_nav {
    position: fixed;
    right: 10px;
    top: 200px;
    width: 30px;
    height: 50%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: beige;
    margin-bottom: 5px !important;
    display: block;
}

.dot:hover {
    background-color: tomato;
}

前方代码丑的有点惨烈 但是通俗易懂 重构后 如下

swiper 移动端鼠标轮播