|
|
@@ -1,17 +1,6 @@
|
|
|
<template>
|
|
|
<div class="app">
|
|
|
- <header>
|
|
|
- <div class="header-inner">
|
|
|
- <div class="link left"><i class="material-icons">home</i></div>
|
|
|
- <div class="link left"><i class="material-icons">playlist_add</i></div>
|
|
|
- <div class="link left"><i class="material-icons">flag</i></div>
|
|
|
- <div class="link left"><i class="material-icons">skip_next</i></div>
|
|
|
- <span class="room-title">Pop</span>
|
|
|
- <div class="link right"><i class="material-icons">queue_music</i></div>
|
|
|
- <div class="link right"><i class="material-icons">chat</i></div>
|
|
|
- <div class="link right"><i class="material-icons">people</i></div>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
+ <component-header></component-header>
|
|
|
<div class="body">
|
|
|
<div class="row">
|
|
|
<div class="col-md-8 push-md-2 col-sm-10 push-sm-1 col-xs-12">
|
|
|
@@ -31,7 +20,6 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- // TODO: Implement these files
|
|
|
import ComponentHeader from './MusareHeader.vue'
|
|
|
import ComponentBody from './MusareBody.vue'
|
|
|
import ComponentFooter from './MusareFooter.vue'
|
|
|
@@ -40,7 +28,7 @@
|
|
|
data() {
|
|
|
return {}
|
|
|
},
|
|
|
- components: { }
|
|
|
+ components: { ComponentHeader }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -58,69 +46,6 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
- header {
|
|
|
- width: 100%;
|
|
|
- height: 64px;
|
|
|
- line-height: 64px;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
|
|
|
- }
|
|
|
-
|
|
|
- .header-inner {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #0091ea;
|
|
|
- .title {
|
|
|
- font-weight: 300;
|
|
|
- font-size: 32px;
|
|
|
- }
|
|
|
-
|
|
|
- * {
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .link {
|
|
|
- z-index: 101;
|
|
|
- position: relative;
|
|
|
- padding: 0 16px 0 16px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- height: 64px;
|
|
|
- min-width: 64px;
|
|
|
- line-height: 64px;
|
|
|
- font-size: 2rem;
|
|
|
- transition: background-color .3s;
|
|
|
- }
|
|
|
-
|
|
|
- .link:hover {
|
|
|
- background-color: rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- float: right;
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
- float: left;
|
|
|
- }
|
|
|
-
|
|
|
- i.material-icons {
|
|
|
- display: block;
|
|
|
- font-size: 2rem;
|
|
|
- line-height: 64px;
|
|
|
- height: 64px;
|
|
|
- }
|
|
|
-
|
|
|
- .room-title {
|
|
|
- left: 50%;
|
|
|
- -webkit-transform: translateX(-50%);
|
|
|
- transform: translateX(-50%);
|
|
|
- font-size: 2.1em;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
.body {
|
|
|
/*width: 100%;
|
|
|
line-height: 256px;
|
theflametrooper