调整按钮样式

src/views/adweb/data/trafficAnalysis.vue

@@ -15,11 +15,13 @@
         </div>
       </a-col>
       <a-col :xl="9" :xxl="12">
-        <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间 </a-button>
-        <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天 </a-button>
-        <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周 </a-button>
-        <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日 </a-button>
-        <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')"> 今日 </a-button>
+        <a-button-group class="time-btn-group">
+          <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
+          <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
+          <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
+          <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
+          <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
+        </a-button-group>
       </a-col>
     </a-row>
   </div>
@@ -590,9 +592,60 @@ const setTime = (time) => {
   /deep/ .ant-btn {
     background: transparent;
     margin-right: 10px;
+    padding: 4px 15px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:hover {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
 
     &.active {
       color: @primary-color;
+      background: #e6f7ff;
+      border-color: @primary-color;
+    }
+  }
+
+  .time-btn-group {
+    /deep/ .ant-btn {
+      background: #fff;
+      padding: 4px 15px;
+      border: 1px solid #d9d9d9;
+      transition: all 0.3s;
+      margin-right: 0;
+
+      &:first-child {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+
+      &:not(:first-child) {
+        margin-left: -1px;
+      }
+
+      &:hover {
+        color: @primary-color;
+        border-color: @primary-color;
+        position: relative;
+        z-index: 1;
+        background: #fff;
+      }
+
+      &.active {
+        color: @primary-color;
+        background: #e6f7ff;
+        border-color: @primary-color;
+        position: relative;
+        z-index: 2;
+      }
     }
   }
 }

src/views/dashboard/Analysis/homePage/adweb3Home.vue

@@ -168,9 +168,11 @@
 
             <a-row class="r5-1">
               <div class="fl">
-                <a-button :type="timeChooseIndex == 7 ? 'primary' : ''" @click="changeTime(7)"> 最近7天 </a-button>
-                <a-button :type="timeChooseIndex == 30 ? 'primary' : ''" @click="changeTime(30)"> 最近30天 </a-button>
-                <a-button :type="timeChooseIndex == 180 ? 'primary' : ''" @click="changeTime(180)"> 最近六个月 </a-button>
+                <a-button-group>
+                  <a-button :type="timeChooseIndex == 7 ? 'primary' : 'default'" class="time-btn" @click="changeTime(7)">最近7天</a-button>
+                  <a-button :type="timeChooseIndex == 30 ? 'primary' : 'default'" class="time-btn" @click="changeTime(30)">最近30天</a-button>
+                  <a-button :type="timeChooseIndex == 180 ? 'primary' : 'default'" class="time-btn" @click="changeTime(180)">最近六个月</a-button>
+                </a-button-group>
               </div>
               <a-col :span="24">
                 <a-spin :spinning="chartsLoading" style="float: left; width: 100%">
@@ -645,3 +647,18 @@
     }
   }
 </style>
+
+<style lang="less" scoped>
+.time-btn {
+  &.ant-btn-default {
+    color: #666;
+    background: #f5f5f5;
+    border-color: #d9d9d9;
+    
+    &:hover {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
+  }
+}
+</style>