vue3仿网易云界面

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

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

---

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

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

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

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

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>
1
2
3
4
5
6
7
8

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

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

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

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

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

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

---

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