上传历史记录样式调整

dangan-ui/src/views/dangan/pictureRecard/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="app-container">
 
-    <el-tabs tab-position="left" v-model="queryParams.ywType" style="width: 350px;" @tab-click="handleQuery">
+    <div style="width: 250px;margin-top: 20px;">
-      <el-tab-pane v-for="dict in dict.type.yw_type" :label="dict.label" :name="dict.value"></el-tab-pane>
+      <div :class="dict.value===queryParams.ywType?'c-tabs__item is-active':'c-tabs__item'"
-    </el-tabs>
+           v-for="dict in dict.type.yw_type" :key="dict.value" @click="handleYwType(dict.value)">
+        {{ dict.label }}
+      </div>
+    </div>
 
     <div>
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
@@ -217,6 +220,14 @@ export default {
         this.loading = false;
       });
     },
+    // 业务类型选择
+    handleYwType(ywType){
+      console.log(ywType);
+      if(this.queryParams.ywType!==ywType){
+        this.queryParams.ywType=ywType;
+        this.handleQuery()
+      }
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -328,4 +339,24 @@ export default {
   align-items: center;
   font-size: 20px;
 }
+
+.c-tabs__item {
+  cursor: pointer;
+  text-align: right;
+  padding: 0 10px;
+  height: 40px;
+  line-height: 40px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #303133;
+  border-right: 5px solid #eeeeee;
+  margin-right: 20px;
+}
+
+.c-tabs__item.is-active {
+  color: #1890ff;
+  border-right: 5px solid #1890ff;
+}
+
 </style>