首页样式优化

 <template>
     <div v-if="channel.length" class="channel-tab">
-        <div class="channel" v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click="changeChannel(index)" v-bind:style="{width: (1 / channel.length) * 100 + '%'}">
+        <div class="channel ellipsis" v-for="(index, item) in channel" v-bind:class="{focus: index === current}" v-on:click="changeChannel(index)" v-bind:style="{width: (1 / channel.length) * 100 + '%'}">
             <span class="name">{{item.name | uppercase}}</span>
         </div>
     </div>
@@ -76,7 +76,7 @@
         width: 100%;
         max-width: 750px;
         height: 90px;
-        font-size: 24px;
+        font-size: 26px;
         text-align: center;
         background: #fff;
         transform: translate(-50%, 0);
@@ -84,7 +84,7 @@
         .channel {
             display: inline-block;
             line-height: 90px;
-            color: #999;
+            color: #b0b0b0;
 
             &.focus {
                 color: #000;
@@ -92,7 +92,7 @@
         }
 
         .name {
-            padding: 9px 0;
+            padding: 12px 0;
 
             &.focus {
                 border-bottom: 4px solid #000;

@@ -26,6 +26,7 @@
 <style>
     .focus {
         .swipe {
+            position: relative;
             height: 100%;
         }
 
@@ -39,6 +40,7 @@
             a {
                 display: block;
             }
+
             img {
                 width: 100%;
                 height: 100%;
@@ -47,7 +49,7 @@
 
         .swipe-indicators {
             left: initial;
-            right: 20px;
+            right: -30px;
         }
 
         .swipe-indicator {

@@ -31,8 +31,10 @@
             position: absolute;
             top: 0;
             right: 0;
-            width: 100px;
+            max-width: 200px;
             height: 100px;
+            padding: 0 30px 0 0;
+            overflow: hidden;
         }
     }
 </style>