weiyuan-document-web/src/components/Reception/Search.vue

<template>
  <div class="search">
    <div class="select-bar">
      <el-popover v-model="popoverShow" transition="el-zoom-in-top" popper-class="select-bar__popover" :visible-arrow="false" trigger="manual" placement="bottom-start">
        <template #reference>
          <el-button type="primary" class="dropdown-button" @click="popoverShow = !popoverShow">
            <div class="btn-slot">
              <i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selectValue}}</p><i class="el-icon-arrow-down el-icon--right"></i>
            </div>
          </el-button>
        </template>
        <template>
          <div class="dropdown-box">
            <div class="left">
              <div class="left-item" v-for="i in ['制度文件','工作流程','岗位工作及标准','表单中心','部门工作职责']" @click="selectValue = i">
                {{ i }}
              </div>
            </div>

            <div class="right">
             <div class="search-bar">
               <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
                 <el-button type="primary" class="dropdown-search-button">
                   <div class="btn-slot">
                     <span>任意词</span><i style="padding-left: 10px;" class="el-icon-arrow-down el-icon--right"></i>
                   </div>
                 </el-button>
                 <template #dropdown>
                   <el-dropdown-menu class="select-drop">
                     <el-dropdown-item command="规章制度">
                       <div style="text-align: center">规章制度</div>
                     </el-dropdown-item>
                     <el-dropdown-item command="工作流程">
                       <div style="text-align: center">工作流程</div>
                     </el-dropdown-item>
                     <el-dropdown-item command="岗位工作及标准">
                       <div style="text-align: center">岗位工作及标准</div>
                     </el-dropdown-item>
                     <el-dropdown-item command="表单中心">
                       <div style="text-align: center">表单中心</div>
                     </el-dropdown-item>
                     <el-dropdown-item command="部门工作职责">
                       <div style="text-align: center">部门工作职责</div>
                     </el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
               </el-dropdown>
               <div class="search__bottom--input">
                 <el-input placeholder="请输入内容" size="" v-model="inputValue">
                   <template #append>
                     <el-button style="background: #247EC3;color: #fff;border: none;border-bottom-left-radius: 0;border-top-left-radius: 0;">搜 索</el-button>
                   </template>
                 </el-input>
               </div>
             </div>

             <div class="history">
               <div class="history__icon">
                 <el-image style="width: 30px;height: 31px" fit="cover" :src="require('@/assets/reception/history-icon.png')"></el-image>
               </div>
               <div class="history__word">
                 <div class="history__word--top">常用搜索</div>
                 <div class="history__word--bottom">
                   <span style="cursor: pointer;" v-for="(i, index) in ['奖学金', '集体户口', '助学金', '党建']">{{ i }}{{ index !== 3 ? '&nbsp|&nbsp' : '' }}</span>
                 </div>
               </div>
             </div>
            </div>
          </div>
        </template>
      </el-popover>

      <div class="select-bar__blank">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popoverShow: false,
      selectValue: '搜索内部资料',
      inputValue: '',
    }
  },
  methods: {},
  computed: {},
  mounted() {
    this.popoverShow = true
  }
}
</script>

<style scoped lang="scss">
.dropdown-box {
  display: flex;

  & .left {
    flex-basis: 25%;

    & > div:last-child {
      border-bottom-left-radius: 4px;
    }
    &-item {
      color: #333;
      text-align: center;
      font-weight: 500;
      font-size: 13px;
      cursor: pointer;
      transition: all .2s;

      padding: 14px 0;

      &:hover {
        color: #fff;
        background: #247EC3;
      }
    }
  }
  & .right {
    border-bottom-right-radius: 4px;
    flex: 1;
    background: url("../../assets/reception/search-bottom-bkg.png") no-repeat center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    & .search-bar {
      display: flex;

      margin: 24px 26.7% 0 8.8%;
      & .dropdown-search-button {
        width: 103px;
        height: 35px;
        font-size: 13px;
        color: #000;
        background: #fff;
        border-radius: 6px;
        border: none;

        margin-right: 13px;
      }
      & .search__bottom--input {
        flex: 1;
        height: 35px;

        & ::v-deep .el-input__inner {
          height: 35px !important;
        }
        & ::v-deep .el-input-group__append {
          border: none;
        }
      }
    }

    & .history {
      display: flex;
      align-items: center;

      margin: 0 0 43px 8.8%;

      &__word {
        font-size: 13px;
        color: #fff;

        padding-left: 13px;
      }
    }
  }
}
.search {
  height: 342px;
  width: 100%;

  padding: 33px 18.75% 38px 18.75%;
  overflow: hidden;
  position: relative;

  &::before {
    content: '';
    background: #1e9fff;
    filter: blur(8px);

    z-index: 0;
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
  }

  .select-bar {
    height: 39px;
    display: flex;

    position: relative;
    & > span {
      flex-basis: 25%;
    }
    &__blank {
      background: #fff;
      flex: 1;
      filter: drop-shadow(0 1px .5px #fff);
      border-top-right-radius: 4px;
    }
  }
}
.btn-slot {
  display: flex;
  align-items: center;
}
.dropdown-button {
  width: 100%;
  background: #376BA3!important;
  color: #fff!important;
  border: none!important;
  border-radius: 4px 0 0 0;

  padding-left: 12.3% !important;
  padding-right: 7% !important;

  &__text {
    flex: 1;
    font-size: 16px;
  }
}

::v-deep div[x-arrow] {
  display: none;
}
::v-deep .el-input__inner {
  border: none;
}

@media (max-width: 900px) {
  .dropdown-search-button {
    width: 80px !important;
  }
  .btn-slot {

    & > i {
      display: none;
    }
  }
}
</style>

<style lang="scss">
.select-bar__popover {
  width: calc(100% - 2 * 18.75%);
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  box-shadow: none;
  border: none;

  padding: 0!important;
  margin-top: 0!important;
}
@media screen and (max-width: 900px) {
  .select-bar__popover {
    width: calc(900px - 337.5px);

    position: absolute;
    left: 168.75px !important;
  }
}
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
  background: #247EC3!important;
  color: #fff!important;
}
.select-drop[x-placement^=bottom] {
  padding: 0!important;
  border: none;
  border-radius:  6px;
  margin-top: 10px !important;
}
.select-drop > li:nth-child(1) {
  border-radius: 6px 6px 0 0;
}
.select-drop > li:nth-child(4) {
  border-radius: 0 0 6px 6px;
}
</style>