vue3仿网易云界面

Mo_olly

已于 2023-02-15 15:14:13 修改

阅读量2.3k

点赞数 4

文章标签： vue3 网易云前端 css

于 2022-08-05 16:06:52 首次发布

本文链接：https://blog.csdn.net/Mo_olly/article/details/126177750

版权

决定记录一下用vue3仿的网易云界面。（更新中）

先放一些界面（主要是样式，没有交互），思路和代码慢慢添加，图片均来源于API，图标均来源于iconfont。

一、首先是主界面的搭建，我将主界面分为左右两个子组件，左边部分主要是下面的列表，用的是flex布局（顺便贴一张我学flex布局时的图，我忘了我是从哪里保存的了😭），然后自己设置一些宽高和margin、padding等看起来美观即可。

display: flex;
flex-direction: column;  /*子项目的排列方向为垂直*/

这里有几个细节：
1、增添鼠标移入效果：

.list div:hover {
    background-color: #ccc8c8;
}

2、点击登录头像旁边的箭头会弹出登录框，再次点击则隐藏，用v-show控制即可，将登录框的位置用absolute固定（如果没显示，可以设置一下z-index看看是否被遮挡在了下面）：

 <div v-show="show" class="loginIn">
        <div><img src="../assets/网易云音乐.jpeg" /></div>
        <hr />
        <input type="text" placeholder="请输入账号">
        <input type="text" placeholder="请输入密码">
        <button>登陆</button>
        <button>注册</button>
 </div>

//箭头的点击事件，show.value默认为false，每点一次取反，则可以点击交替显隐
const show = ref(false)
const loginIn = function() {
    show.value = !show.value
}

3、点击任意一个列表，都会显示“请先登录”界面，该界面用的vue-router跳转，
所以要给点击位置添加router-link和在显示位置添加<router-view / >：
（安装和配置就不贴了）

 <div><img src="../assets/发现音乐.png" alt="" /><router-link to="/noLogin">发现音乐</router-link></div>

4、“请先登录”做了一个动画的样式：

.note{
    /*其它样式*/
    /*...*/
    /*位置设置成动画停下来时你想让它在的位置*/
    animation-name: eject;   /*给动画取个名字*/
    animation-duration: 1s;  /*动画持续时间*/
    animation-iteration-count:infinite; /*播放次数，我设置的是永远，即循环播放*/
    }
@keyframes eject {
    0% {
        top: 10px;
        left: 300px;  /*设置起始位置（我用的绝对布局）*/
    }
    100% {
        top: 200px;
        left: 300px;  /*设置最终位置，则会完成从起始到终点位置的一个动画*/
    }
}

/*将背景模糊了*/
opacity: 0.5;      /*透明程度*/
filter: blur(6px); /*模糊程度*/

在这里插入图片描述

二、下次更新主界面的右半边！主要是轮播图的实现嗷
（没有用插件，不过在element-plus里有差不多的组件，走马灯里面的卡片化组件）

那个，俺弃文了🐶，需要代码的，去github～