按钮

src/App.vue

@@ -180,8 +180,16 @@ export default {
   }
 }
 
-/* 列表-操作栏-更多的poppover样式 */
+/* 操作栏-更多的poppover样式 */
 .el-popover.btn-popper {
+  min-width: 150px !important;
+  margin-top: 5px !important;
+  padding: 6px !important;
+  background-color: rgb(247, 250, 253);
+}
+
+/* 列表-操作栏-更多的poppover样式 */
+.el-popover.btn-popper-table {
   min-width: 80px !important;
   margin-top: 5px !important;
   padding: 6px !important;
@@ -199,19 +207,18 @@ export default {
   // display: none;
   width: 8px;
   height: 8px;
-  background-color: #EBEEF5;
+  background-color: #ebeef5;
 }
 ::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  -webkit-box-shadow: inset 0 0  6px rgba(243, 236, 236, 0.3);
+  -webkit-box-shadow: inset 0 0 6px rgba(243, 236, 236, 0.3);
   background-color: #ccc;
   border-radius: 8px;
 }
 ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 6px rgba(0,0,0, .2);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
   /*滚动条的轨道*/
   border-radius: 8px;
   background: rgba(255, 255, 255, 1);
 }
-
 </style>

src/assets/scss/buttonstyle.scss

@@ -5,62 +5,114 @@
   background: linear-gradient(0deg, #7A58D1 0%, #8C91FF 100%) !important;
   // border-radius: 3px !important;
   color: #fff !important;
-  // font-size: 14px !important;
+  font-size: 14px !important;
   border-color: #8C91FF !important;
-  // width: 83px !important;
+  min-width: 83px !important;
-  // height: 29px !important;
+  height: 29px !important;
-  // line-height: 19px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
 }
 
 //绿色
 .diy-button--green {
   background:  linear-gradient(0deg, #33A8A6 0%, #29D2CE 100%) !important;
-  border-radius: 3px !important;
-  color: #fff !important;
-  font-size: 14px !important;
   border-color: #29D2CE !important;
+  font-size: 14px !important;
+  color: #fff !important;
+  min-width: 83px !important;
+  height: 29px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
+
+ 
 }
 
 //蓝色
 .diy-button--blue {
   background:  linear-gradient(0deg, #0062BB 0%, #0081EC 100%) !important;
-  border-radius: 3px !important;
-  color: #fff !important;
-  font-size: 14px !important;
   border-color: #0081EC !important;
+  font-size: 14px !important;
+  color: #fff !important;
+  min-width: 83px !important;
+  height: 29px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
+  
+  
 }
 
 //黄色
 .diy-button--yellow {
   background:  linear-gradient(0deg, #FAA700 0%, #FFBF28 100%) !important;
-  border-radius: 3px !important;
   color: #fff !important;
   font-size: 14px !important;
-  border-color: #FFBF28 !important;
+  color: #fff !important;
+  min-width: 83px !important;
+  height: 29px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
 }
+
 //橙色
 .diy-button--orange {
   background:  linear-gradient(0deg, #EE6436 1%, #FC8C6B 100%) !important;
-  border-radius: 3px !important;
-  color: #fff !important;
-  font-size: 14px !important;
   border-color: #FC8C6B !important;
+  font-size: 14px !important;
+  color: #fff !important;
+  min-width: 83px !important;
+  height: 29px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
+  
+  
 }
 //红色
 .diy-button--red {
   background:  linear-gradient(0deg, #DB3B3B 1%, #FF8080 100%) !important;
-  border-radius: 3px !important;
+  border-color: #FF8080 !important;
+  font-size: 14px !important;
   color: #fff !important;
+  min-width: 83px !important;
+  height: 29px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
+  
+  
+}
+//灰色
+.diy-button--gray {
+  background:  linear-gradient(0deg, #A6C3D0, #FFFFFF) !important;
+  border-color: #A6C3D0 !important;
+  color: #002765 !important;
   font-size: 14px !important;
-  border-color: #FF8080 !important;
+  min-width: 83px !important;
+  height: 29px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
+ 
 }
 //白色
 .diy-button--white {
-  background:  linear-gradient(0deg, #A6C3D0, #FFFFFF) !important;
+  background-color:#fff!important;
-  border-radius: 3px !important;
+  border: 1px solid #3D77FF !important;
+  color: #0153B2 !important;
+  font-size: 14px !important;
+  min-width: 83px !important;
+  height: 29px !important;
+  line-height: 2px !important;
+  padding:0 8px  !important;
+}
+  
+//操作栏更多
+.diy-button--other {
+  text-decoration: underline !important;
   color: #002765 !important;
   font-size: 14px !important;
-  border-color: #FFFFFF !important;
+  // min-width: 83px !important;
+  // height: 29px !important;
+  // line-height: 2px !important;
+  // padding:0 8px  !important;
+  
 }
 
 //旧版--------弃用

src/assets/scss/modules/visual/communityManage.scss

@@ -50,11 +50,22 @@
 .div_btn {
   display: flex;
   margin-top: 10px;
+  justify-content: space-between;
 
-  .btn_upload {
+  .div_btn_left{
-    margin-left: 10px;
     display: flex;
+
+    .btn_upload {
+      margin-left: 10px;
+      display: flex;
+    }
   }
+
+  .div_btn_right{
+    
+  }
+
+ 
 }
 
 .el-row {

src/views/modules/base/community/community.vue

@@ -190,11 +190,11 @@
 
             <el-button style="margin-left:30px"
                        size="small"
-                       class="diy-button--search"
+                       class="diy-button--blue"
                        @click="handleSearch">查询</el-button>
             <el-button style="margin-left:10px"
                        size="small"
-                       class="diy-button--reset"
+                       class="diy-button--gray"
                        @click="resetSearch">重置</el-button>
           </div>
         </el-form>

src/views/modules/base/community/communityTable.vue

@@ -2,105 +2,138 @@
   <div>
 
     <div class="div_btn">
-      <el-button v-if="showYhymInfo && customerId!=='1535072605621841922'"
-                 style=""
-                 class="diy-button--reset"
-                 size="small"
-                 :loading="yhymLoading"
-                 @click="handleYhymInfo">补全一房一码信息</el-button>
-      <el-button v-if="showYhymInfo && customerId!=='1535072605621841922'"
-                 style=""
-                 class="diy-button--export"
-                 size="small"
-                 :loading="xcxmLoading"
-                 @click="createBatchNeiQrUrl">补全小程序小区码</el-button>
-      <el-button style=""
-                 class="diy-button--add"
-                 size="small"
-                 @click="handleAdd">新增小区</el-button>
 
-      <div class="btn_upload"
+      <div class="div_btn_left">
-           v-if="showImportBtn">
         <el-button style=""
-                   class="diy-button--export"
                    size="small"
-                   @click="handleExportModule('community')">下载小区模板</el-button>
+                   class="diy-button--purple"
-
+                   @click="handleAdd">新增小区</el-button>
-        <el-upload :headers="$getElUploadHeaders()"
+        <el-button style="margin-left:10px"
-                   ref="upload_community"
+                   class="diy-button--green"
-                   style=""
-                   :multiple='false'
-                   :show-file-list='false'
-                   :before-upload="((file)=>{beforeUpload(file, 'community')})"
-                   action=""
-                   accept=".xls,.xlsx"
-                   :http-request="(()=>{uploadFile( 'community')})">
-          <el-button style="margin-left:10px"
-                     size="small"
-                     class="diy-button--delete">导入小区数据</el-button>
-        </el-upload>
-
-        <el-button style=";margin-left:10px"
-                   class="diy-button--export"
                    size="small"
-                   @click="handleExportModule('building')">下载楼栋模板</el-button>
+                   @click="handleExportOpen">导出</el-button>
-
+        <div class="btn_upload"
-        <el-upload :headers="$getElUploadHeaders()"
+             v-if="showImportBtn">
-                   style=""
+
-                   ref="upload_building"
+          <el-upload :headers="$getElUploadHeaders()"
-                   :multiple='false'
+                     ref="upload_community"
-                   :show-file-list='false'
+                     style=""
-                   :before-upload="((file)=>{beforeUpload(file, 'building')})"
+                     :multiple='false'
-                   action=""
+                     :show-file-list='false'
-                   accept=".xls,.xlsx"
+                     :before-upload="((file)=>{beforeUpload(file, 'community')})"
-                   :http-request="(()=>{uploadFile( 'building')})">
+                     action=""
-          <el-button style="margin-left:10px"
+                     accept=".xls,.xlsx"
-                     size="small"
+                     :http-request="(()=>{uploadFile( 'community')})">
-                     class="diy-button--delete">导入楼栋数据</el-button>
+            <el-button size="small"
-        </el-upload>
+                       class="diy-button--blue">导入小区数据</el-button>
-        <el-button style=";margin-left:10px"
+          </el-upload>
-                   class="diy-button--export"
+
+          <el-upload :headers="$getElUploadHeaders()"
+                     style=""
+                     ref="upload_building"
+                     :multiple='false'
+                     :show-file-list='false'
+                     :before-upload="((file)=>{beforeUpload(file, 'building')})"
+                     action=""
+                     accept=".xls,.xlsx"
+                     :http-request="(()=>{uploadFile( 'building')})">
+            <el-button style="margin-left:10px"
+                       size="small"
+                       class="diy-button--yellow">导入楼栋数据</el-button>
+          </el-upload>
+
+          <el-upload :headers="$getElUploadHeaders()"
+                     style=""
+                     ref="upload_room"
+                     :multiple='false'
+                     :show-file-list='false'
+                     :before-upload="((file)=>{beforeUpload(file, 'room')})"
+                     action=""
+                     accept=".xls,.xlsx"
+                     :http-request="(()=>{uploadFile( 'room')})">
+            <el-button style="margin-left:10px"
+                       size="small"
+                       class="diy-button--orange">导入房屋数据</el-button>
+          </el-upload>
+
+        </div>
+
+        <el-button style="margin-left:10px"
+                   class="diy-button--red"
                    size="small"
-                   @click="handleExportModule('room')">下载房屋模板</el-button>
+                   @click="deleteBatch">批量删除</el-button>
-
-        <el-upload :headers="$getElUploadHeaders()"
-                   style=""
-                   ref="upload_room"
-                   :multiple='false'
-                   :show-file-list='false'
-                   :before-upload="((file)=>{beforeUpload(file, 'room')})"
-                   action=""
-                   accept=".xls,.xlsx"
-                   :http-request="(()=>{uploadFile( 'room')})">
-          <el-button style="margin-left:10px"
-                     size="small"
-                     class="diy-button--delete">导入房屋数据</el-button>
-        </el-upload>
 
-      </div>
+        <!-- <el-button style=";margin-left:10px"
-      <el-button style="margin-left:10px"
-                 class="diy-button--reset"
-                 size="small"
-                 @click="handleExportOpen">导出</el-button>
-      <el-button v-if="agencyObj.level == 'community'"
-                 style="margin-left:10px"
-                 class="diy-button--qrcode"
-                 size="small"
-                 @click="handleDownQr(agencyObj, 'community')">社区二维码</el-button>
-      <el-button style="float:left;margin-left:10px"
-                 class="diy-button--more"
-                 size="small"
-                 @click="deleteBatch">批量删除</el-button>
-      <!-- <el-button style=";margin-left:10px"
                  class="diy-button--export"
                  size="small"
                  :disabled="yihuyidangDisabled"
                  @click="handleExportYihuyidang()">导出一户一档</el-button> -->
+      </div>
+      <div class="div_btn_right">
+        <el-popover popper-class="btn-popper"
+                    placement="bottom"
+                    style="margin-left: 10px"
+                    width="20"
+                    trigger="hover">
+          <div v-if="showImportBtn"
+               class="table-more-btn">
+            <el-button class="diy-button--other"
+                       size="small"
+                       type="text"
+                       @click="handleExportModule('community')">下载小区模板</el-button>
+          </div>
+
+          <div v-if="showImportBtn"
+               class="table-more-btn">
+            <el-button class="diy-button--other"
+                       size="small"
+                       type="text"
+                       @click="handleExportModule('building')">下载楼栋模板</el-button>
+          </div>
+          <div v-if="showImportBtn"
+               class="table-more-btn">
+            <el-button class="diy-button--other"
+                       size="small"
+                       type="text"
+                       @click="handleExportModule('room')">下载房屋模板</el-button>
+          </div>
+          <div v-if="showYhymInfo && customerId!=='1535072605621841922'"
+               class="table-more-btn">
+            <el-button class="diy-button--other"
+                       size="small"
+                       type="text"
+                       :loading="yhymLoading"
+                       @click="handleYhymInfo">补全一房一码信息</el-button>
 
-      <el-button size="small"
+          </div>
-                 v-if="displayedBaobiaoBtn"
+          <div v-if="showYhymInfo && customerId!=='1535072605621841922'"
-                 class="diy-button--add"
+               class="table-more-btn">
-                 @click="reportForm">智能填报</el-button>
+            <el-button class="diy-button--other"
+                       size="small"
+                       type="text"
+                       :loading="xcxmLoading"
+                       @click="createBatchNeiQrUrl">补全小程序小区码</el-button>
+          </div>
+          <div v-if="displayedBaobiaoBtn"
+               class="table-more-btn">
+            <el-button size="small"
+                       type="text"
+                       class="diy-button--other"
+                       @click="reportForm">智能填报</el-button>
+          </div>
+          <div v-if="agencyObj.level == 'community'"
+               class="table-more-btn">
+            <el-button class="diy-button--other"
+                       size="small"
+                       type="text"
+                       @click="handleDownQr(agencyObj, 'community')">社区二维码</el-button>
+          </div>
+          <el-button size="small"
+                     style="float:right"
+                     class="diy-button--white"
+                     slot="reference">更多操作<i class="el-icon-caret-bottom"></i></el-button>
+        </el-popover>
+      </div>
     </div>
 
     <div class="div_table_item">

src/views/modules/base/epidemic/natFocus/natFocusList.vue

@@ -336,7 +336,7 @@
                        size="small"
                        @click="handleEdit(scope.row)">修改</el-button>
 
-            <el-popover popper-class="btn-popper"
+            <el-popover popper-class="btn-popper-table"
                         placement="bottom"
                         style="margin-left: 10px"
                         width="20"

src/views/modules/base/epidemic/natFocus/natFocusListHistory.vue

@@ -288,7 +288,7 @@
                        size="small"
                        @click="handleDetail(scope.row)">查看</el-button>
 
-            <el-popover popper-class="btn-popper"
+            <el-popover popper-class="btn-popper-table"
                         placement="bottom"
                         style="margin-left: 10px"
                         width="20"

src/views/modules/base/epidemic/travel.vue

@@ -262,7 +262,7 @@
                        size="small"
                        @click="handleEdit(scope.row)">修改</el-button>
 
-            <!-- <el-popover popper-class="btn-popper"
+            <!-- <el-popover popper-class="btn-popper-table"
                         placement="bottom"
                         style="margin-left:10px"
                         width="20"

src/views/modules/base/epidemic/veroFocus/veroFocusList.vue

@@ -266,7 +266,7 @@
                        size="small"
                        @click="handleEdit(scope.row)">修改</el-button>
 
-            <el-popover popper-class="btn-popper"
+            <el-popover popper-class="btn-popper-table"
                         placement="bottom"
                         style="margin-left: 10px"
                         width="20"

src/views/modules/communityParty/heart/heartList.vue

@@ -180,7 +180,7 @@
                        size="small"
                        @click="handleReview(scope.row)">添加回顾</el-button>
 
-            <!-- <el-popover popper-class="btn-popper"
+            <!-- <el-popover popper-class="btn-popper-table"
                         placement="bottom"
                         style="margin-left:10px"
                         width="20"

src/views/modules/communityParty/regionalParty/units.vue

@@ -210,7 +210,7 @@
                        @click="handleEdit(scope.row)">修改</el-button>
 
             <el-popover v-if="agencyId===scope.row.agencyId"
-                        popper-class="btn-popper"
+                        popper-class="btn-popper-table"
                         placement="bottom"
                         style="margin-left:10px"
                         width="20"

src/views/modules/communityService/ninePlaces/inspect/inspect.vue

@@ -184,7 +184,7 @@
                        size="small"
                        @click="handleEdit(scope.row)">修改</el-button>
 
-            <el-popover popper-class="btn-popper"
+            <el-popover popper-class="btn-popper-table"
                         placement="bottom"
                         style="margin-left:10px"
                         width="20"