374

src/project/wuxi/AppPhotoReport/PhotoDetail.vue

@@ -26,8 +26,13 @@
         <span v-if="!result.files.length">暂无照片</span>
       </AiItem>
     </AiGroup> -->
-    <u-gap height="24"/>
-    <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/>
+    <!-- <u-gap height="24"/> -->
+    <!-- <u-tabs :list="[{name:'办理进度'},{name:'我的评价'}]" :current="currentTab" @change="v=>currentTab=v"/> -->
+    <div class="tab-content">
+      <div class="tab-item" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)" :class="currentTab == index ? 'active' : ''">{{ item.name }}
+        <span class="active-line" v-if="currentTab == index"/>
+      </div>
+    </div>
     <u-gap height="24"/>
     <AiGroup noBorder v-if="currentTab=='0'">
       <AiStep v-for="(item,i) in process" :key="item.id" :index="i">
@@ -58,7 +63,8 @@ export default {
       result: {},
       currentTab: 0,
       evaluation: {},
-      id: ''
+      id: '',
+      tabList: [{name:'办理进度'},{name:'我的评价'}]
     }
   },
   computed: {
@@ -90,6 +96,9 @@ export default {
     this.$dict.load(['clapEventStatus', 'residentEventSource'])
   },
   methods: {
+    tabClick(index) {
+      this.currentTab = index
+    },
     getInfo() {
       this.$loading()
       this.$instance.post(`/app/appresidentreportinfo/queryDetailById?id=${this.id}`).then(res => {
@@ -203,5 +212,31 @@ export default {
       margin-right: 0;
     }
   }
+  .tab-content {
+    display: flex; 
+    .tab-item {
+      flex: 1;
+      position: relative;
+      height: 88px;
+      line-height: 88px;
+      font-size: 32px;
+      color: #666;
+      text-align: center;
+      .active-line {
+        position: absolute;
+        top: 80px;
+        left: 50%;
+        margin-left: -40px;
+        width: 80px;
+        height: 4px;
+        border-radius: 2px;
+        background-color: #197DF0;
+      }
+    }
+    .active {
+      font-weight: 500;
+      color: #333;
+    }
+  }
 }
 </style>