排行榜头部按钮样式修复

components/ranking-header.vue

@@ -114,15 +114,32 @@
         height: 30px;
         display: flex;
         margin: 0 auto;
-        position: relative;
         .btn {
+          padding: 0 15px;
           font-size: 13px;
           font-weight: 700;
           height: 30px;
-          padding: 0 15px;
-          line-height: 30px;
+          text-align: center;
+          line-height: 31px;
           color: #373839;
-          z-index: 2;
+          position: relative;
+        }
+        .btn:after {
+          position: absolute;
+          content: " ";
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          width: 200%;
+          height:200%;
+          border: 1PX solid #C7C8C9;
+          //border-radius: 40px;
+          color: #C7C8C9;
+          -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+          -webkit-transform: scale(.5, .5);
+          transform: scale(.5, .5);
         }
         .left {
           border-bottom-left-radius: 15px;
@@ -132,32 +149,25 @@
           border-bottom-right-radius: 15px;
           border-top-right-radius: 15px;
         }
+        .left:after {
+          border-bottom-left-radius: 40px;
+          border-top-left-radius: 40px;
+          border-right: none;
+        }
+        .right:after{
+          border-bottom-right-radius: 40px;
+          border-top-right-radius: 40px;
+          border-left: none;
+        }
         .active-btn {
           background: #F8F9FA;
         }
         .line {
           width: 0.5px;
-          height: 100%;
+          height: 31px;
           background: #C7C8C9;
         }
       }
-      .head-btn:after {
-        position: absolute;
-        content: " ";
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        width: 200%;
-        height:200%;
-        border: 1PX solid #C7C8C9;
-        border-radius: 40px;
-        color: #C7C8C9;
-        -webkit-transform-origin: 0 0;
-        transform-origin: 0 0;
-        -webkit-transform: scale(.5, .5);
-        transform: scale(.5, .5);
-      }
       .right-btn {
         color: #373839;
         font-size: 13px;