Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 2979712e 编写于 作者: Z Zachary
浏览文件
操作

feat: update header bar 

* Modify file structure
上级 4f84d297
隐藏空白更改
内联 并排
Showing with 489 addition and 98 deletion
src/App.vue
浏览文件 @ 2979712e
......@@ -8,9 +8,9 @@
<script>
import NavBar from "components/content/NavBar";
import BackTop from "components/common/BackTop";
import Player from "components/common/Player";
import BottomFooter from "components/common/BottomFooter";
import BackTop from "components/content/BackTop";
import Player from "components/content/Player";
import BottomFooter from "components/content/BottomFooter";
export default {
name: "#app",
......@@ -26,19 +26,5 @@ export default {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
src/components/common/NavMenu.vue 已删除 100644 → 0
浏览文件 @ 4f84d297
<template>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#f2f2f2"
text-colr="#000"
active-text-color="#31c27c"
>
<el-menu-item
v-for="(item, idx) in homeData"
:key="item.title"
:index="idx.toString()"
@click="onClik(item.path)"
>
{{ item.title }}
</el-menu-item>
</el-menu>
</template>
<script>
export default {
name: "NavMenu",
data() {
return {
activeIndex: "0",
activeIndex2: "0",
homeData: [
{ title: "首页", path: "/MusicLibrary/home" },
{ title: "歌手", path: "/MusicLibrary/songers" },
{ title: "新碟", path: "/MusicLibrary/newdisc" },
{ title: "排行榜", path: "/MusicLibrary/ranking" },
{ title: "分类歌单", path: "/MusicLibrary/classified" },
{ title: "电台", path: "/MusicLibrary/radions" },
{ title: "MV", path: "/MusicLibrary/mv" },
],
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
onClik(path) {
this.$router.push(path);
},
},
};
</script>
<style scoped>
</style>
src/components/content/NavBar.vue
浏览文件 @ 2979712e
<template>
<div id="nav">
<router-link v-for="item in navData" :key="item.title" :to="item.path">{{
item.title
}}</router-link>
<!-- <router-link to="/">Home</router-link> |
<router-link to="/My">My</router-link> -->
<search-input />
<div class="mod_header">
<div class="section_inner">
<h1 class="qqmusic_title">
<a>
<!-- <img src="" alt="YZ-music" class="logo" /> -->
<h1 class="logo">YZ-music</h1>
</a>
</h1>
<!-- 导航 S -->
<ul class="mod_top_nav" role="nav">
<li
class="top_nav__item"
v-for="(item, idx) in navData"
:key="item.title"
>
<router-link
class="top_nav__link"
:class="$route.meta.index == idx ? 'top_nav__link--current' : ''"
:data="$route.meta.index"
:to="item.path"
>
{{ item.title }}
</router-link>
</li>
</ul>
<!-- 子导航 -->
<ul class="mod_top_subnav" v-if="$route.meta.index == 0">
<li
class="top_subnav__item"
v-for="(item, idx) in subNavData"
:key="idx"
>
<router-link
class="top_subnav__link"
:class="
$route.meta.name == item.name ? 'top_subnav__link--current' : ''
"
:data="$route.meta.name"
:to="item.path"
>
{{ item.title }}
</router-link>
</li>
</ul>
<!-- 搜索 -->
<div class="mod_top_search" role="search">
<div class="mod_search_input">
<search-input />
</div>
</div>
<div class="header__opt">
<!-- 未登录 -->
<span class="mod_top_login">
<a
class="top_login__link js_logined"
href="//y.qq.com/portal/profile.html#stat=y_new.top.user_pic"
onclick="setStatCookie&amp;&amp;setStatCookie();"
style=""
><img
src="http://thirdqq.qlogo.cn/g?b=sdk&amp;k=uwNbKsMJia8ASG007iakGJXA&amp;s=140&amp;t=1586579228"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000';this.onerror=null;"
class="top_login__cover js_user_img"
/>
</a>
<a
class="top_login__link js_login"
data-stat="y_new.top.login"
href="javascript:;"
style="display: none"
>
登录
</a>
<a
class="login__link header__link js_login"
data-stat="y_new.top.login"
href="javascript:;"
style="display: none"
>登录</a
>
</span>
<!-- 用户信息 -->
<div class="popup_user">
<div class="popup_user_data">
<a
href="//y.qq.com/portal/profile.html#stat=y_new.top.pop.user_pic"
class="popup_user_data__cover_link"
onclick="setStatCookie&amp;&amp;setStatCookie();"
>
<img
src="http://thirdqq.qlogo.cn/g?b=sdk&amp;k=uwNbKsMJia8ASG007iakGJXA&amp;s=140&amp;t=1586579228"
onerror="this.src=\'//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000\';this.onerror=null;"
class="popup_user_data__cover js_user_img"
/>
<img
src="//y.gtimg.cn/mediastyle/yqq/img/login_qq.png?max_age=2592000"
class="popup_user_data__icon"
/>
</a>
<!-- 自动垂直居中 -->
<div class="popup_user_data__cont">
<div class="popup_user_data__name">
<a
href="//y.qq.com/portal/profile.html#stat=y_new.top.pop.user_nickname"
onclick="setStatCookie&amp;&amp;setStatCookie();"
class=""
>Zachary_</a
>
</div>
<div class="popup_user_data__lv">
<a class="js_vip_jump" rel="noopener" target="_blank"
><img
src=""
alt="one"
class="popup_user_data__lv_icon" /></a
><a class="js_vip_jump" rel="noopener" target="_blank"
><img src="" alt="two" class="popup_user_data__lv_icon"
/></a>
</div>
</div>
</div>
<div class="popup_user_toolbar">
<div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit js_msgcenterdiv">
<a
href="//y.qq.com/portal/msg_center.html#stat=y_new.top.pop.msg_center"
onclick="setStatCookie&amp;&amp;setStatCookie();"
>评论通知</a
>
</div>
</div>
<div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit">
<a
href="javascript:;"
class="js_logout"
data-stat="y_new.top.pop.logout"
>退出QQ登录</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -20,8 +162,26 @@ export default {
{ title: "音乐库", path: "/" },
{ title: "我的音乐", path: "/My" },
],
subNavData: [
{ title: "首页", name: "home", path: "/MusicLibrary/home" },
{ title: "歌手", name: "songers", path: "/MusicLibrary/songers" },
{ title: "新碟", name: "newdisc", path: "/MusicLibrary/newdisc" },
{ title: "排行榜", name: "ranking", path: "/MusicLibrary/ranking" },
{
title: "分类歌单",
name: "classified",
path: "/MusicLibrary/classified",
},
{ title: "电台", name: "radions", path: "/MusicLibrary/radions" },
{ title: "MV", name: "mv", path: "/MusicLibrary/mv" },
],
};
},
methods: {
text() {
console.log("test", this.$route.meta.index);
},
},
components: {
SearchInput,
},
......@@ -29,4 +189,220 @@ export default {
</script>
<style scoped>
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
.mod_header {
background-color: #fff;
position: relative;
z-index: 4;
}
.mod_header .section_inner {
padding-top: 90px;
}
.main,
.section_inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.qqmusic_title {
position: absolute;
left: 0;
top: 22px;
}
.mod_top_nav {
position: absolute;
left: 198px;
top: 0;
}
.top_nav__item {
position: relative;
float: left;
margin-right: -5px;
}
.top_nav__link {
display: block;
padding: 0 20px;
line-height: 90px;
height: 90px;
text-align: center;
font-size: 18px;
}
.top_nav__link--current,
.top_nav__link--current:hover {
background-color: #31c27c;
color: #fff;
}
.mod_top_subnav {
height: 51px;
line-height: 51px;
border-top: 1px solid #f2f2f2;
padding-left: 230px;
margin-right: -50px;
}
.top_subnav__item {
float: left;
font-size: 15px;
color: #c1c1c1;
margin-right: 47px;
}
.top_subnav__link {
display: block;
}
.top_subnav__link--current {
color: #31c27c;
}
.mod_top_search {
position: absolute;
top: 0;
right: 284px;
}
.mod_search_input {
padding: 0 33px 0 11px;
line-height: 36px;
height: 36px;
margin-top: 26px;
position: relative;
background-color: #fff;
transition: width 0.6s ease-out;
}
.header__opt {
position: absolute;
top: 0;
right: 0;
height: 90px;
line-height: 90px;
}
.mod_top_login {
font-size: 0;
height: 90px;
line-height: 90px;
}
.top_login__link {
position: relative;
z-index: 12;
font-size: 16px;
float: left;
width: 38px;
margin-right: 10px;
text-align: center;
}
.top_login__cover {
width: 38px;
height: 38px;
border-radius: 90px;
vertical-align: -14px;
}
.top_login__link {
position: relative;
z-index: 12;
font-size: 16px;
float: left;
width: 38px;
margin-right: 10px;
text-align: center;
}
.popup_user {
position: absolute;
right: 0;
top: 90px;
width: 288px;
background-color: #fff;
z-index: 9;
line-height: 1.5;
border: 1px solid #f2f2f2;
font-size: 13px;
}
.mod_search_other,
.mod_search_result,
.popup_user {
max-height: 0;
visibility: hidden;
transition: max-height 0.6s ease-out, visibility 1ms 0.6s;
overflow: hidden;
}
.popup_user_data {
display: table;
height: 84px;
overflow: hidden;
text-align: left;
padding: 25px 20px 0;
}
.popup_user_data__cover_link {
position: relative;
float: left;
}
.popup_user_data__cover {
float: left;
display: block;
width: 70px;
height: 70px;
border-radius: 999px;
margin-right: 10px;
}
.popup_user_data__cont {
display: table-cell;
vertical-align: middle;
}
.popup_user_data__name {
color: #000;
padding: 0 0 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popup_user_data__lv {
white-space: nowrap;
margin-bottom: 6px;
}
.popup_user_toolbar {
padding: 13px 20px 6px;
font-size: 15px;
}
.popup_user_toolbar__item {
position: relative;
margin-bottom: 16px;
}
.drop {
visibility: visible;
max-height: 800px;
transition: max-height 0.6s ease-out;
}
.logo {
font-size: 38px;
padding-left: 20px;
}
</style>
src/router/index.js
浏览文件 @ 2979712e
......@@ -23,28 +23,114 @@ const routes = [
redirect: "/MusicLibrary"
},
{
path: "/MusicLibrary",
name: "MusicLibrary",
path: "/MusicLibrary",
component: MusicLibrary,
meta: {
index: 0
},
children: [
{ path: "home", component: Home },
{ path: "songers", component: Songers },
{ path: "newdisc", component: NewDisc },
{ path: "ranking", component: Ranking },
{ path: "classified", component: Classified },
{ path: "radions", component: Radions },
{ path: "mv", component: MV },
{ path: "songerDetail", component: SongerDetail },
{ path: "songDetail", component: SongDetail },
{ path: "albumDetail", component: AlbumDetail },
{ path: "playlistDetail", component: PlaylistDetail },
{ path: "searchResultDetail", component: SearchResultDetail }
{
path: "",
component: Home,
meta: {
name: "home"
}
},
{
path: "home",
component: Home,
meta: {
name: "home"
}
},
{
path: "songers",
component: Songers,
meta: {
name: "songers"
}
},
{
path: "newdisc",
component: NewDisc,
meta: {
name: "newdisc"
}
},
{
path: "ranking",
component: Ranking,
meta: {
name: "ranking"
}
},
{
path: "classified",
component: Classified,
meta: {
name: "classified"
}
},
{
path: "radions",
component: Radions,
meta: {
name: "ranking"
}
},
{
path: "mv",
component: MV,
meta: {
name: "mv"
}
},
{
path: "songerDetail",
component: SongerDetail,
meta: {
name: "songerDetail"
}
},
{
path: "songDetail",
component: SongDetail,
meta: {
name: "songDetail"
}
},
{
path: "albumDetail",
component: AlbumDetail,
meta: {
name: "albumDetail"
}
},
{
path: "playlistDetail",
component: PlaylistDetail,
meta: {
name: "playlistDetail"
}
},
{
path: "searchResultDetail",
component: SearchResultDetail,
meta: {
name: "searchResultDetail"
}
}
]
},
{
path: "/My",
name: "My",
component: My
path: "/My",
component: My,
meta: {
index: 1
}
}
];
......
src/views/MusicLibrary.vue
浏览文件 @ 2979712e
<template>
<div>
<nav-menu />
<router-view :key="$route.fullPath"></router-view>
</div>
</template>
<script>
import NavMenu from "components/common/NavMenu";
export default {
name: "MusicLibrary",
components: { NavMenu },
};
</script>
......
src/views/musicLibrary/Home.vue
浏览文件 @ 2979712e
......@@ -7,9 +7,9 @@
</template>
<script>
import Banner from "components/content/Banner";
import RecommendedBar from "components/content/RecommendedBar";
import HomeTop from "components/content/HomeTop";
import Banner from "components/common/Banner";
import RecommendedBar from "components/common/RecommendedBar";
import HomeTop from "components/common/HomeTop";
export default {
components: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或