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

<template>
  <div class="search">
    <div class="select-bar">
      <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
        <el-button type="primary" class="dropdown-button">
          <div style="display: flex;align-items: center;">
            <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 #dropdown>
          <el-dropdown-menu style="width: 235px;" class="main-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="select-bar__blank">
      </div>
    </div>
    <div class="search__bottom">
      <div class="top">
        <div class="search__bottom--btn">
          <el-dropdown trigger="click" placement="bottom" @command="e => selectValue = e">
            <el-button type="primary" class="dropdown-search-button">
              <span style="padding-right: 10px;">任意词</span><i class="el-icon-arrow-down el-icon--right"></i>
            </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-menu>
            </template>
          </el-dropdown>
        </div>

        <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="bottom">
        <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>

<script>
export default {
  data() {
    return {
      selectValue: '搜索内部资料',
      inputValue: '',
    }
  },
  methods: {},
  computed: {},
}
</script>

<style scoped lang="scss">
.search {
  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;
    &__blank {
      background: #fff;
      flex: 1;
      border-top-right-radius: 4px;
    }
  }
  &__bottom {
    width: 100%;
    background-size: cover;
    background: url("../../assets/reception/search-bottom-bkg.png") no-repeat center;
    border-radius: 0 0 4px 4px;

    padding-bottom: 43px;
    position: relative;

    & .top {
      display: flex;
      justify-content: center;
      align-items: center;

      padding: 24px 190px 0 190px;

      .search__bottom--btn {

        & .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;
        }
      }
    }

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

      padding: 43px 31.58% 0 31.58%;

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

        padding-left: 13px;
      }
    }
  }
}

.dropdown-button {
  width: 235px;
  background: #376BA3!important;
  color: #fff!important;
  border: none!important;
  border-radius: 4px 0 0 0;

  padding-left: 29px !important;
  padding-right: 18px !important;

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

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

</style>

<style lang="scss">
.main-drop[x-placement^=bottom] {
  padding: 0!important;
  border: none;
  border-radius: 0 0 4px 4px;
  margin-top: 0 !important;

  & > li {
    height: 39px;
  }
}
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
  background: #247EC3!important;
  color: #fff!important;
}
.main-drop > li:nth-child(5) {
  border-radius: 0 0 4px 4px;
}
.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>