上图图标优化+搜索按钮优化

linwe

2024-11-20 5c5ad7b217e0a0da24f039b0b7b8829b3e2ca130

 src/components/global/GlobalSearch.vue

@@ -7,8 +7,7 @@
        <el-select :teleported="false" :size="item.size || ''" v-model="params[item.props]"
          :clearable="item.clearable || false" :multiple="item.multiple || false" collapse-tags
          :placeholder="item.placeholder || (item.label ? '请选择' + item.label : '请选择')"
          :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }"
          @change="searchSelectChange($event, item)">
          :style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }" @change="searchSelectChange($event, item)">
          <el-option v-for="selectItem in item.data" :key="selectItem.value" :label="selectItem.label"
            :value="selectItem.value">
          </el-option>
@@ -60,8 +59,8 @@

      <div class="search-cont" v-if="item.type === 'multiDate' && options.quickMultiDateBtn">
        <span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
        <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]"
          :type="multiDateType" :key="multiDateType" :clearable="item.clearable || false"
        <el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" :type="multiDateType"
          :key="multiDateType" :clearable="item.clearable || false"
          :placeholder="item.placeholder || item.label || '多选择时间'" :editable="false"
          :style="{ width: $px2rem(`${item.width || '180'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }"
          :value-format="item.format || 'yyyy-MM-dd'">
@@ -72,20 +71,20 @@
    <div class="search-cont search-cont-btn" v-if="options.searchBtnGroup">
      <el-button v-if="options.searchBtn || false"
        :type="options.searchBtnTitleShow ? '' : options.searchType || 'primary'"
        :disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search"
        @click="searchClick" :class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{
        :disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search" @click="searchClick"
        :class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{
          options.searchBtnTitleShow ?
            options.searchBtnTitle : '查 询'
          options.searchBtnTitle : '查 询'
        }}</el-button>

      <el-button v-if="options.resetBtn || false" :type="options.resetType || ''"
        :disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh"
        @click="resetClick" class="btn-h32-w76 reset-btn">重
        :disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh" @click="resetClick"
        class="btn-h32-w76 reset-btn">重
        置</el-button>

      <el-button v-if="options.exportBtn || false" :type="options.exportType || 'primary'"
        :disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download"
        @click="exportClick" class="btn-h32-w76">导 出</el-button>
        :disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download" @click="exportClick"
        class="btn-h32-w76">导 出</el-button>
    </div>
  </div>
</template>
@@ -494,6 +493,22 @@
  }
}


.search-bar .search-cont-btn[data-v-4fa3a782] .el-button {
  background: none;
}

::v-deep .el-button {
  background-color: transparent;
  border-color: none;
  border: none;
  cursor: pointer;
  color: #edffff;
  background: rgba(135, 158, 199, 0.3);
  box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.95);
}


::v-deep .el-date-editor {
  width: 100%;
  color: #fff;