fix: 修改codereview界面

src/views/Project/CodeReview.vue

@@ -1,22 +1,31 @@
 <template>
   <div class="container">
+<!--    <el-row>-->
+<!--      <h2>代码评审列表</h2>-->
+<!--    </el-row>-->
+<!--    <div class = "tabs">-->
+<!--      <div class="tab-pane" :active="tabActive[0]" @click="changeTab(0)">-->
+<!--        Opened <div class="tab-pane-inline-circle">{{tabCount[0]}}</div>-->
+<!--      </div>-->
+<!--      <div class="tab-pane" :active="tabActive[1]" @click="changeTab(1)">-->
+<!--        Merged <div class="tab-pane-inline-circle">{{tabCount[1]}}</div>-->
+<!--      </div>-->
+<!--      <div class="tab-pane" :active="tabActive[2]" @click="changeTab(2)">-->
+<!--        Closed <div class="tab-pane-inline-circle">{{tabCount[2]}}</div>-->
+<!--      </div>-->
+<!--      <div class="tab-pane" :active="tabActive[3]" @click="changeTab(3)">-->
+<!--        All <div class="tab-pane-inline-circle">{{tabCount[3]}}</div>-->
+<!--      </div>-->
+<!--    </div>-->
     <el-row>
       <h2>代码评审列表</h2>
     </el-row>
-    <div class = "tabs">
-      <div class="tab-pane" :active="tabActive[0]" @click="changeTab(0)">
-        Opened <div class="tab-pane-inline-circle">{{tabCount[0]}}</div>
-      </div>
-      <div class="tab-pane" :active="tabActive[1]" @click="changeTab(1)">
-        Merged <div class="tab-pane-inline-circle">{{tabCount[1]}}</div>
-      </div>
-      <div class="tab-pane" :active="tabActive[2]" @click="changeTab(2)">
-        Closed <div class="tab-pane-inline-circle">{{tabCount[2]}}</div>
-      </div>
-      <div class="tab-pane" :active="tabActive[3]" @click="changeTab(3)">
-        All <div class="tab-pane-inline-circle">{{tabCount[3]}}</div>
-      </div>
-    </div>
+    <ElTabs class="tabs" v-model="activeTab">
+      <ElTabPane :label="'Opened(' + openedNum + ')'" name="Opened">已开放的代码评审</ElTabPane>
+      <ElTabPane :label="'Merged(' + mergedNum + ')'" name="Merged">已合并的代码评审</ElTabPane>
+      <ElTabPane :label="'Closed(' + closedNum + ')'" name="Closed">已关闭的代码评审</ElTabPane>
+      <ElTabPane :label="'All(' + totalNum + ')'" name="All">全部代码评审</ElTabPane>
+    </ElTabs>
   </div>
 </template>
 <script>
@@ -24,63 +33,72 @@ export default {
   name: 'CodeReview.vue',
   data() {
     return {
-      tabActive: [true, false, false, false],
-      tabCount: [0, 0, 0, 0],
+      activeTab: 'Opened',
+      openedNum: 0,
+      mergedNum: 0,
+      closedNum: 0,
+      totalNum: 0,
+      // tabActive: [true, false, false, false],
+      // tabCount: [0, 0, 0, 0],
     };
   },
   methods: {
-    changeTab(index) {
-      if (this.tabActive[index]) return null;
-      this.tabActive = [false, false, false, false];
-      this.tabActive[index] = true;
-      return null;
-    },
+    // changeTab(index) {
+    //   if (this.tabActive[index]) return null;
+    //   this.tabActive = [false, false, false, false];
+    //   this.tabActive[index] = true;
+    //   return null;
+    // },
   },
-  async mounted() { console.log('Null'); },
+  // async mounted() { console.log('Null'); },
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .container {
-  margin: 20px 50px;
-}
-.tabs {
-  margin: 15px auto;
-  height: 52px;
-  border-style: solid;
-  border-color: #8a8a8a white;
-  border-width: 0.5px 0px;
-  /* overflow: hidden; */
-}
-.tab-pane {
-  display: inline-block;
-  width: 10%;
-  padding: 15px 5px;
-  text-align: center;
-  border-style: solid;
-  border-color: white;
-  border-width: 2px 0px;
-  height: 18px;
-  font-size: 15px;
-  color: #7a7a7a;
-  cursor: pointer;
-}
-.tab-pane:hover{
-  border-bottom-width: 2px;
-  border-bottom-color: #8a8a8a;
-  color: #000;
-}
-.tab-pane[active=true]{
-  border-bottom-color: #1296db;
-  border-bottom-width: 2px;
-  color: black;
-  font-weight: bold;
-}
-.tab-pane-inline-circle {
-  display: inline-block;
-  padding: 2px;
-  border-radius: 50%;
-  width: 15px;
-  background-color: #eeeeee;
+  margin: 50px 100px;
+  & .tabs {
+    width: 90%;
+    margin-top: 10px;
+  }
 }
+/*.tabs {*/
+/*  margin: 15px auto;*/
+/*  height: 52px;*/
+/*  border-style: solid;*/
+/*  border-color: #8a8a8a white;*/
+/*  border-width: 0.5px 0px;*/
+/*  !* overflow: hidden; *!*/
+/*}*/
+/*.tab-pane {*/
+/*  display: inline-block;*/
+/*  width: 10%;*/
+/*  padding: 15px 5px;*/
+/*  text-align: center;*/
+/*  border-style: solid;*/
+/*  border-color: white;*/
+/*  border-width: 2px 0px;*/
+/*  height: 18px;*/
+/*  font-size: 15px;*/
+/*  color: #7a7a7a;*/
+/*  cursor: pointer;*/
+/*}*/
+/*.tab-pane:hover{*/
+/*  border-bottom-width: 2px;*/
+/*  border-bottom-color: #8a8a8a;*/
+/*  color: #000;*/
+/*}*/
+/*.tab-pane[active=true]{*/
+/*  border-bottom-color: #1296db;*/
+/*  border-bottom-width: 2px;*/
+/*  color: black;*/
+/*  font-weight: bold;*/
+/*}*/
+/*.tab-pane-inline-circle {*/
+/*  display: inline-block;*/
+/*  padding: 2px;*/
+/*  border-radius: 50%;*/
+/*  width: 15px;*/
+/*  background-color: #eeeeee;*/
+/*}*/
 </style>