设置左侧按钮状态

src/components/Setting/index.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="setting_contaienr">
     <div class="left_container">
-      <div class="tab_wrap">
+      <div class="tab_wrap" @click="changeActiveTab(1)">
         <p class="active_line" v-show="activeTab == 1"></p>
         <p :class="activeTab == 1 ? 'title active' : 'title'">设备参数配置</p>
-        <div class="btn style-btn" @click="changeActiveTab(1)">配置</div>
+        <div :class="activeTab == 1 ? 'btn style-btn' : 'dis_btn'">配置</div>
       </div>
-      <div class="tab_wrap">
+      <div class="tab_wrap" @click="changeActiveTab(2)">
         <p class="active_line" v-show="activeTab == 2"></p>
         <p :class="activeTab == 2 ? 'title active' : 'title'">修改管理员密码</p>
-        <div class="btn style-btn" @click="changeActiveTab(2)">修改</div>
+        <div :class="activeTab == 2 ? 'btn style-btn' : 'dis_btn'">修改</div>
       </div>
-      <div class="tab_wrap">
+      <div class="tab_wrap" @click="changeActiveTab(3)">
         <p class="active_line" v-show="activeTab == 3"></p>
         <p :class="activeTab == 3 ? 'title active' : 'title'">用户管理</p>
-        <div class="btn style-btn" @click="changeActiveTab(3)">管理</div>
+        <div :class="activeTab == 3 ? 'btn style-btn' : 'dis_btn'">管理</div>
       </div>
-      <div class="tab_wrap">
+      <div class="tab_wrap" @click="changeActiveTab(4)">
         <p class="active_line" v-show="activeTab == 4"></p>
         <p :class="activeTab == 4 ? 'title active' : 'title'">日期/时间设置</p>
-        <div class="btn style-btn" @click="changeActiveTab(4)">配置</div>
+        <div :class="activeTab == 4 ? 'btn style-btn' : 'dis_btn'">配置</div>
       </div>
     </div>
     <div class="right_container">
@@ -108,6 +108,19 @@ const changeActiveTab = index => {
         letter-spacing: 0.1em;
         color: #ffffff;
       }
+      .dis_btn {
+        width: 87px;
+        height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: Source Han Sans CN;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: normal;
+        letter-spacing: 0.1em;
+        color: #06518b;
+      }
       .active_line {
         position: absolute;
         left: 20px;