added new tabs, fixed localsong click

package-lock.json

 {
   "name": "spinshare-client",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/components/Song/SongLocalItem.vue

 <template>
-    <div :class="'song-item-local ' + (isSpinShare ? '' : 'song-item-onlylocal')" v-on:contextmenu="showContextMenu($event)" v-on:click="openOnSpinShare()">
+    <div :class="'song-item-local ' + (isSpinShare ? '' : 'song-item-onlylocal')" v-on:contextmenu="showContextMenu($event)" v-on:click="openInClient()">
         <div class="song-cover" v-bind:style="'background-image: '+ backgroundImage +' , url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'" v-observe-visibility="visibilityChanged">
             <div class="song-charter-info">
                 <div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ detail.charter ? detail.charter : "Unknown" }}</span></div>

src/views/Startup.vue

 <template>
     <section class="section-startup">
+        <header>
             <div class="tabs">
-            <router-link to="/"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
-            <router-link to="/new"><span>{{ $t('startup.tabs.new') }}</span></router-link>
-            <router-link to="/hot"><span>{{ $t('startup.tabs.hot') }}</span></router-link>
-            <router-link to="/popular"><span>{{ $t('startup.tabs.popular') }}</span></router-link>
+                <router-link to="/" class="tab"><span>{{ $t('startup.tabs.frontpage') }}</span></router-link>
+                <router-link to="/new" class="tab"><span>{{ $t('startup.tabs.new') }}</span></router-link>
+                <router-link to="/hot" class="tab"><span>{{ $t('startup.tabs.hot') }}</span></router-link>
+                <router-link to="/popular" class="tab"><span>{{ $t('startup.tabs.popular') }}</span></router-link>
             </div>
+        </header>
 
         <router-view></router-view>
     </section>
@@ -21,54 +23,36 @@
 
 <style scoped lang="less">
     section {
-        padding: 50px;
+        & header {
+            background: rgba(0,0,0,0.5);
+            padding: 25px 50px;
+            padding-bottom: 0px;
 
             & .tabs {
                 display: flex;
-            justify-content: center;
-            margin-bottom: 25px;
 
-            & a {
-                color: inherit;
-                text-decoration: none;
+                & .tab {
+                    font-size: 14px;
                     font-weight: bold;
-                letter-spacing: 0.1em;
-                padding: 10px 15px;
-                margin: 0px 5px;
-                text-align: center;
                     text-transform: uppercase;
-                opacity: 0.6;
-                transition: 0.2s ease-in-out background, 0.2s ease-in-out opacity;
+                    letter-spacing: 0.25em;
+                    padding: 15px 40px;
+                    border-top-left-radius: 4px;
+                    border-top-right-radius: 4px;
+                    background: rgba(0,0,0,0.6);
+                    color: rgba(255,255,255,0.4);
+                    transition: 0.2s ease-in-out all;
+                    text-decoration: none;
 
-                & span {
-                    display: block;
-                    transition: 0.2s ease-in-out transform;
-                    transform: translateY(4px);
-                }
-                &:hover {
-                    background: rgba(255,255,255,0.2);
-                    border-radius: 5px;
-                }
-                &:after {
-                    transition: 0.2s ease-in-out background;
-                    margin: 0 auto;
-                    margin-top: 5px;
-                    width: 20px;
-                    height: 3px;
-                    border-radius: 5px;
-                    background: transparent;
-                    content: "";
-                    display: block;
+                    &:not(.active):hover {
+                        cursor: pointer;
+                        background: #272c2e;
+                        color: rgba(255,255,255,0.75);
                     }
-
                     &.router-link-exact-active {
                         opacity: 1;
-
-                    & span {
-                        transform: translateY(0px);
-                    }
-                    &:after {
-                        background: linear-gradient(135deg, #fd2f85, #7a34ec);
+                        color: rgba(255,255,255,1);
+                        background: #212629;
                     }
                 }
             }

src/views/StartupFrontpage.vue

@@ -81,6 +81,9 @@
 </script>
 
 <style scoped lang="less">
+    .frontpage {
+        padding: 50px;
+
         .staff-promos {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -133,4 +136,5 @@
                 }
             }
         }
+    }
 </style>
\ No newline at end of file

src/views/StartupHotSongs.vue

@@ -73,4 +73,7 @@
 </script>
 
 <style scoped lang="less">
+    .song-row {
+        padding: 50px;
+    }
 </style>
\ No newline at end of file

src/views/StartupNewSongs.vue

@@ -74,6 +74,6 @@
 
 <style scoped lang="less">
     .song-row {
-        margin-top: 25px;
+        padding: 50px;
     }
 </style>
\ No newline at end of file

src/views/StartupPopularSongs.vue

@@ -74,6 +74,6 @@
 
 <style scoped lang="less">
     .song-row {
-        margin-top: 25px;
+        padding: 50px;
     }
 </style>
\ No newline at end of file